SlideShow / Slider Frame Bulat Transisi Putar

Hari ini kami ingin berbagi slideshow melingkar sederhana dan menyenangkan bersama Anda. Ini adalah konsep eksperimental dan idenya adalah membalik lingkaran dalam sudut tertentu tergantung pada titik lingkaran yang kita klik. Ada tiga kemungkinan berbeda untuk masing-masing sisi: atas, tengah dan bawah. Misalnya, saat mengklik bagian kanan atas gambar, lingkaran akan berbelok di sudut yang terkait, sehingga terlihat seolah-olah kita menekan bagian itu dan mengungkapkan gambar berikutnya yang ada di wajah belakang lingkaran.
Demo menampilkan ilustrasi oleh Isaac Montemayor. Lihat karyanya di Dribbble atau di situsnya.
Beginilah strukturnya:

<div id="fc-slideshow" class="fc-slideshow">
 <ul class="fc-slides">
  <li><img src="images/1.jpg" /><h3>Hot</h3></li>
  <li><img src="images/2.jpg" /><h3>Cold</h3></li>
  <li><img src="images/3.jpg" /><h3>Light</h3></li>
  <li><img src="images/4.jpg" /><h3>Dark</h3></li>
  <li><img src="images/5.jpg" /><h3>Soft</h3></li>
  <li><img src="images/6.jpg" /><h3>Hard</h3></li>
  <li><img src="images/7.jpg" /><h3>Smooth</h3></li>
  <li><img src="images/8.jpg" /><h3>Rough</h3></li>
 </ul>
</div>

Dan kita mengubahnya menjadi berikut:

<div id="fc-slideshow" class="fc-slideshow">

 <ul class="fc-slides">
  <!-- ... -->
 </ul>

 <nav>
  <div class="fc-left">
   <span></span>
   <span></span>
   <span></span>
   <i class="icon-arrow-left"></i>
  </div>
  <div class="fc-right">
   <span></span>
   <span></span>
   <span></span>
   <i class="icon-arrow-right"></i>
  </div>
 </nav>

 <div class="fc-flip">
  <div class="fc-front">
   <div><img src="images/4.jpg"><h3>Dark</h3></div>
   <div class="fc-overlay-light"></div>
  </div>
  <div class="fc-back">
   <div><img src="images/5.jpg"><h3>Soft</h3></div>
   <div class="fc-overlay-dark"></div>
  </div>
 </div>
 
</div>

Elemen nav memiliki beberapa bentang kosong yang berfungsi sebagai "area deteksi". Setiap sisi lingkaran memiliki tiga area yang bisa diklik, satu di atas, satu di tengah dan satu di bagian bawah. Elemen i akan berfungsi sebagai panah navigasi dan tergantung pada rentang mana kita melayang, kita akan memutar kotak panah kecil ke tempat yang tepat. Tapi kita tidak akan menggunakan panah sebagai area yang bisa diklik tapi keseluruhan rentangnya.
Pembagian flip lingkaran berisi struktur 3D khusus: ia memiliki sisi depan dan belakang. Begitu kita menavigasi ke item berikutnya atau sebelumnya, kita akan menunjukkan struktur itu dan memutar wadah flip sehingga kita melihat sisi belakangnya.
Hamparan membuat segalanya terlihat sedikit lebih realistis dengan memberi cahaya atau kegelapan. Kita menghidupkan opacity tergantung sudut rotasi.
Kami hanya memanggil plugin seperti ini:

$( '#fc-slideshow' ).flipshow();

Dan ini adalah pilihan untuk plugin ini:

// the options
$.Flipshow.defaults = {
 // default transition speed (ms)
 speed : 700,
 // default transition easing
 easing : 'cubic-bezier(.29,1.44,.86,1.06)'
};

Lihat  Unduh

Password: www.duniadesain.net

Script ini bisa bekerja di ( IE9, Google Chrome 30+, Firefox 27+)

Perlu diketahui, bahwa ini sangat eksperimental dan hanya akan berfungsi sebagaimana mestinya di browser yang mendukung perubahan CSS 3d. Bagi orang lain ada fallback sederhana yang hanya menunjukkan dan menyembunyikan item sebelumnya atau berikutnya.
Kami harap Anda menemukan plugin kecil ini menginspirasi!
Source: Tympanus