Effetto di apertura delle pagine per HTML5?

Question

Ciao è possibile avere un effetto di capovolgere una pagina come un libro per HTML5? Se sì, come è fatto?

Grazie in anticipo!

Answer 1

È possibile utilizzare le trasformazioni CSS per questo.

Maggiori informazioni: http://www.the-art-of-web.com/css/css-animation/

O qui (attualmente disponibile solo nei browser Webkit) http://www.romancortes.com/blog/pure-css3-page-flip-effect/

Answer 2

È possibile utilizzare il plugin jQuery per effetto page flip.

Di seguito è riportato il collegamento al plug-in di jQuery.

http://plugins.jquery.com/plugin-tags/page-flip

Potete trovare demo http://builtbywill.com/code/booklet/

Spero che questo vi aiuterà.

Answer 3

Ecco un altro page-flip animation done with CSS Animations UPDATE: LINK BROKEN. La metodologia è basata su Roman Cortes's inspired original.

Il modo in cui viene creato è che ogni pagina destra è doppiamente annidata all'interno di due div. Il div interno viene ruotato di 30 gradi attorno a un punto di rotazione sopra la pagina all'interno di un div esterno in modo che la pagina venga visualizzata. Il div esterno viene anche ruotato in vista attorno allo stesso punto di rotazione di circa 15 gradi. È configurato con un overflow: nascosto e funge da contenitore di ritaglio per la pagina div interna. z-indexing è usato per impilare le pagine una sopra l'altra.

Ogni pagina è sovrapposta e sottoposta a un gradiente di opacità progressiva grigia che viene ridimensionato sull'asse x in modo che l'ombra aumenti e diminuisca man mano che la pagina viene ruotata.

Il codice è un po 'complessa, ma vista origine è piuttosto semplice

Answer 4

turn.js è un plugin per jQuery che crea un effetto di voltare pagina molto realistico utilizzando HTML5, è un effetto molto bello e il plugin è stato scritto in un tale modo che l'implementazione e la configurazione siano semplici e poco impegnative.