1. Accueil
  2. Question et réponse
  3. Comment faire un JavaScript HTML 5 Image canevas "page flip" comme vous le voyez souvent dans Flash?

Comment faire un JavaScript HTML 5 Image canevas "page flip" comme vous le voyez souvent dans Flash?

2009-12-02 13 views
16

Est-ce que quelqu'un a essayé de recréer l'effet de bascule de la page avec des images comme vous le voyez souvent dans Adobe Flash avec JavaScript et la balise canvas de HTML 5?Comment faire un JavaScript HTML 5 Image canevas "page flip" comme vous le voyez souvent dans Flash?

Y a-t-il des cadres ou des plug-ins JQuery qui effectuent ce type d'effet?

La page flip dans Flash vous permet de saisir un coin de la page de livre simulé et de retourner la page comme si vous inversiez la page d'un vrai livre. Je veux vraiment apprendre à faire cela avec JavaScript et le tag canvas de HTML 5, mais je ne sais pas par où commencer ni quelles formules seraient nécessaires.

Example page flip in flash

Source

2009-12-02 Zachary Scott

Répondre

16

Vous pourriez jeter un oeil à une autre (nice one) la mise en œuvre de Flipper page HTML5 basé: http://jpageflipper.codeplex.com/

Il est vraiment agréable et il est mis en œuvre comme un plugin jQuery.

Source

2010-05-18 22:05:37

+1

L'effet de retournement attendu est beaucoup mieux que la démo de jFlip parce qu'il montre une image sur la page arrière. –

+1

Salut, j'ai écrit presque la même chose, mais avec WebGL - il est extrêmement lisse :) http://flipr.ivank.net –

8

Vous pouvez jFlip, il est un plugin jQuery, Ce n'est pas compatible IE mais je suppose que ce n'est pas un problème pour vous puisque vous demandez HTML5.

Source

2009-12-02 19:51:56

+1

Ironie du sort, de tous les liens de cette page, jFlip était le seul qui a travaillé dans IE6 pour moi. – 10basetom

+1

@ 10basetom IEronically comme certains pourraient même dire – rickyduck

1

Ceci est mieux fait avec l'élément <foreignObject> de SVG et les transformations SVG. This blog post by Mark Finkle a quelques informations sur la rotation des choses que vous auriez besoin de faire dans un "flip/turn" effet. Pour autant que je sache, seuls Gecko 1.9+ et WebKit supportent cela.

Source

2009-12-02 20:26:22

4

Il y a un case study clair et informatif sur la création de votre propre effet flip page basée sur celle du 20 Things I Learned About Browsers and the Web livre auquel Narendrakumar est lié. C'est une excellente implémentation à imiter, l'étude de cas est claire avec des exemples de code pertinents, et elle a été écrite par un développeur interactif expérimenté pour Fi, l'entreprise qui a développé le livre.

Source

2012-02-15 12:45:53

 Questions connexes

  • Aucun problème connexe^_^