Comment faire une image HTML HTML 5 Canvas "flip de page" comme vous le voyez habituellement dans Flash?

Quelqu'un a déjà essayé de recréer l'effet page flip avec des images comme vous avez l'habitude de voir dans Adobe Flash et de JavaScript et HTML 5 de la balise canvas?

Existe-il des cadres ou des plugins JQuery qui font ce type d'effet?

La page flip en Flash vous permet de saisir un coin de la simulation de la page du livre et de tourner la page comme vous le feriez flip une vraie page du livre.

J'ai vraiment envie de savoir comment le faire avec du JavaScript et du HTML 5 de la balise canvas, mais vous ne savez pas par où commencer, ni que les formules seraient nécessaires.

Exemple de page flip en flash

source d'informationauteur Zachary Scott

  1. 16

    Vous pourriez avoir un coup d'oeil à une autre (belle) la mise en œuvre de HTML5 sur page flipper: http://jpageflipper.codeplex.com/

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

  2. 8

    Vous pouvez essayer jFlipc'est un Plugin jQuery, Il n'est pas IE-conformes, mais je suppose que ce n'est pas un problème pour vous puisque vous demandez HTML5.

  3. 8

    Celui-ci est un plugin jquery et assez chouette

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

  5. 4

    Ici est un HTML5 Page flip App que j'ai construit à l'aide de HTML5 Canvas & jQuery. Il est appelé RectoVerso.

    J'ai aussi couru à travers celui-ci: http://romancortes.com/ficheros/page-flip.html

    Qui est fait avec seulement CSS3.

  6. 4

    Il est clair et instructif étude de cas sur la création de votre propre page flip effet sur la base de l'un dans l' 20 Choses que j'ai Apprises au Sujet des Navigateurs et sur le Web livre qui Narendrakumar liés. C'est une excellente mise en œuvre de l'imiter, l'étude de cas est clair, avec les exemples de code, et il a été écrit par un haut interactive développeur pour Fi gratuite, de la société qui a développé le livre.

  7. 3

    http://js1k.com/2010-first/demo/441

    Aussi compact que possible 😀

  9. 1

    Il vaut mieux le faire avec le format SVG est <foreignObject> élément SVG et les transforme. Ce billet de blog par Mark Finkle a quelques infos sur la rotation de choses que vous devez faire dans une "page flip/tour". Autant que je sache, seulement Gecko 1.9+ WebKit et de soutien.