Effet de retournement de page pour HTML5?
Salut, est-il possible d'avoir un effet de retournement d'une page comme un livre pour HTML5? Si oui, comment est-il fait?
Merci d'avance!
Voici une autre animation de retournement de page réalisée avec des animations CSS MISE À JOUR: LIEN REMPLACÉ AVEC L'URL ARCHIVE.ORG. La méthodologie est basée sur l'original inspiré de Roman Cortes .
La façon dont cela est construit est que chaque page de droite est imbriquée dans deux divisions. Le div intérieur est tourné de 30 degrés autour d'un point de rotation au-dessus de la page à l'intérieur d'un div extérieur afin que la page apparaisse. Le div externe est également tourné en vue autour du même point de rotation d'environ 15 degrés. Il est configuré avec un débordement: caché et agit comme un conteneur d'écrêtage pour la page div intérieure. L'indexation z est utilisée pour empiler les pages les unes sur les autres.
Chaque page est superposée et sous-jacente avec un dégradé d'opacité progressive gris qui est mis à l'échelle sur l'axe des x de sorte que l'ombre croît et décroît lorsque la page est tournée.
Le code est un peu complexe mais la source de la vue est assez simple
Vous pouvez utiliser le plugin jQuery pour l'effet de retournement de page.
Ci-dessous le lien vers le plugin de jQuery.
http://plugins.jquery.com/plugin-tags/page-flip
Vous pouvez trouver une démo sur http://builtbywill.com/code/booklet/
J'espère que cela vous aidera.
Vous pouvez utiliser des transformations CSS pour cela.
Plus d'informations: http://www.the-art-of-web.com/css/css-animation/
Ou ici (actuellement uniquement disponible dans les navigateurs Webkit) http://www.romancortes.com/blog/pure-css3-page-flip-effect/
turn.js est un plugin pour jQuery qui crée un effet de rotation de page très réaliste en utilisant HTML5, c'est un bel effet et le plugin a été écrit de telle manière que son implémentation et sa configuration soient simples et peu exigeantes.