Soru HTML5 için sayfa çevirme efekti?


Merhaba, HTML5 için bir kitap gibi bir sayfa çevirme etkisi olması mümkün mü? Eğer öyleyse nasıl yapılır?

Şimdiden teşekkürler!


21
2018-01-06 09:37


Menşei




Cevaplar:


İşte başka CSS Animasyonları ile sayfa çevirme animasyonu GÜNCELLEME: LINK BROKEN. Metodoloji dayanmaktadır Roman Cortes'in esin kaynağı.

Bu yol, her sağ sayfa iki div içinde çift yuvalanmış olmasıdır. İçteki div, sayfanın göründüğü şekilde, sayfanın üstündeki bir dönüş noktasının etrafında 30 derece döndürülerek döndürülebilir. Dıştaki div ayrıca, aynı dönme noktası etrafında yaklaşık 15 derece döndürülebilir. Bir taşma ile yapılandırılmıştır: gizli ve iç div sayfası için bir kırpma konteynırı olarak işlev görür. Sayfaları birbirinin üzerine yığmak için z indeksleme kullanılır.

Her sayfa, x ekseni içinde ölçeklendirilen gri ilerleyici bir opaklık gradyanı ile kaplanmış ve alttan kaplanmıştır, böylece gölge, sayfaların döndürülmesiyle azalır ve azalır.

Kod biraz karmaşık ancak görüntü kaynağı oldukça basittir


11
2018-03-28 23:48





Sayfa çevirme efekti için jQuery eklentisini kullanabilirsiniz.

Aşağıda jQuery eklentisinin bağlantısı var.

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

Demoyu şu adreste bulabilirsiniz: http://builtbywill.com/code/booklet/

Umarım bu yardımcı olur.


8
2018-01-06 09:49





Bunun için CSS Dönüşümlerini kullanabilirsiniz.

Daha fazla bilgi : http://www.the-art-of-web.com/css/css-animation/

Veya burada (sadece şu anda Webkit tarayıcılarında mevcut) http://www.romancortes.com/blog/pure-css3-page-flip-effect/


5
2018-01-06 09:45





turn.js HTML5 kullanarak çok gerçekçi bir sayfa dönüş efekti yaratan jQuery için bir eklenti, bu hoş bir etki ve eklenti, basit ve iddialı olmayan bir şekilde uygulanması ve yapılandırılması için yazılmıştır.


2
2017-11-02 02:36