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

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="https://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="https://code.jquery.com/jquery-1.8.2.min.js"></script>
 <script src="https://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>