MobileFlip.js – Defter sayfası gibi sayfa döndürme efekti

MobileFlip.js jQuery Flip  3 boyutlu sürükleyince defter yaprağı gibi dönen bir galeri örnekleri oluşturabilmeniz için Hiro Inami tarafından geliştirilmiş bir uygulamadır . Asıl amacı mobil tarayıcılar için olsada masaüstü cihazlar içinde kullanılabiliyor.  Webkit 3D dönüşümlerle birlikte hazırlanan Flip uygulaması webkit destekli bütün tarayıcılar üzerinde sorunsuz  şekilde çalışıyor. Webkit  desteklemeyen tarayıcılarda ise bir  resimden diğer resime geçiş slayt olarak gerçekleşiyor.  Sadece resimlere  odaklı bir eklenti değil. Herhangi bir html element ile ilişkilendirip kullanabilmeniz  mümkün.  İsterseniz Flip eklentisini kullanarak defter yaprağı gibi  dönen websayfaları da tasarlayabilirsiniz.

Kullanım

  • Head etiketleri arasına eklemeniz gereken bölümler.

Js ve  css dosya adresleri :

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
 <link rel="stylesheet" href="../jquery.mobile.flip.min.css" />
 <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
 <script type="text/javascript" src="../jquery.mobile.flip.js"></script>

JavaScript :

<script type="text/javascript">
 $(document).ready(function() {
 $("#flipRoot").flip({
 forwardDir: "ltor",
 height: "340px",
 showpager: true,
 loop: true}));
});
</script>
  • Body etiketleri arasına eklemeniz gereken bölüm.

Html :

<div id="flipRoot" data-role="flip">
 <div>
 Flip Content 1
 </div>
 <p>
 Flip Content 2
 </p>
 <section>
 Flip Content 3
 </section>
</div>

 

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2020-07-18 tarihinde yayınlandı,Toplam 1401 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(Yorum yapılmamış)
Yükleniyor...