web-dev-qa-db-fra.com

Comment faire une "page flip" d'image JavaScript HTML 5 Canvas comme vous le voyez couramment dans Flash?

Quelqu'un a-t-il essayé de recréer l'effet de retournement de page avec des images comme vous voyez généralement dans Adobe Flash avec la balise canvas JavaScript et HTML 5?

Existe-t-il des frameworks ou des plug-ins JQuery qui font ce type d'effet?

Le retournement de page dans Flash vous permet de saisir un coin de la page de livre simulée et de retourner la page comme si vous retourniez la page d'un vrai livre.

Je veux vraiment apprendre à le faire avec JavaScript et la balise canvas de HTML 5, mais je ne sais pas par où commencer ni quelles formules seraient nécessaires.

Exemple de page retournée en flash

16
Zachary Scott

Vous pourriez jeter un œil à une autre (Nice) implémentation du flipper de page basé sur HTML5: http://jpageflipper.codeplex.com/

C'est vraiment sympa et il est implémenté comme un plugin jQuery.

16
Ivan Suhinin

Celui-ci est un plugin jquery et assez astucieux

http://www.turnjs.com/#home

8
iamalismith

Vous pouvez essayer jFlip , c'est un plugin jQuery, ce n'est pas conforme à IE mais je suppose que ce n'est pas un problème pour vous puisque vous demandez HTML5.

8
Soufiane Hassou

Il existe une étude de cas claire et informative sur la création de votre propre effet de retournement de page basé sur celui des 20 choses J'ai appris sur les navigateurs et le livre Web auquel Narendrakumar était 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 senior pour Fi, la société qui a développé le livre.

4
Andrew Patton

Voici une application de retournement de page HTML5 que j'ai créée à l'aide de Canvas Element & jQuery de HTML5. Cela s'appelle RectoVerso .

J'ai également rencontré celui-ci: http://romancortes.com/ficheros/page-flip.html
Ce qui se fait uniquement avec CSS3.

4
Brad
4
Narendrakumar

http://js1k.com/2010-first/demo/441
Aussi compact que possible: D

3
mieszkoz
2
Noelchan

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

1
Eli Grey