Sebuah flat bergaya Polaroid Galeri di mana item-item (di sini saya gunakan foto) yang tersebar secara acak dalam sebuah wadah (Container). Ketika item tertentu dipilih, ia akan bergerak ke tengah sementara Polaroid yang lain akan membuat ruang dengan berpindah ke sisi. Opsional, item dapat memiliki backface yang akan ditampilkan dengan membalik Polaroid saat mengklik navigasi current.
Kita menggunakan struktur berikut untuk galeri:
<section id="photostack-1" class="photostack photostack-start">Tag pada
<div>
<!-- default Polaroid without backside -->
<figure>
<a href="http://goo.gl/Qw3ND4" class="photostack-img">
<img src="img/1.jpg" alt="img01"/>
</a>
<figcaption>
<h2 class="photostack-title">Serenity Beach</h2>
</figcaption>
</figure>
<!-- Polaroid with backside -->
<figure>
<a href="http://goo.gl/fhwlSP" class="photostack-img">
<img src="img/2.jpg" alt="img02"/>
</a>
<figcaption>
<h2 class="photostack-title">Happy Days</h2>
<!-- optional backside -->
<div class="photostack-back">
<p>Fish don't fry in the kitchen and beans don't burn on the grill. Took a whole lotta tryin' just to get up that hill. Baby if you've ever wondered - wondered whatever became of me. </p>
</div>
</figcaption>
</figure>
<!-- Example for different shuffle iteration count -->
<figure data-shuffle-iteration="3">
<!-- ... -->
</figure>
<!-- Example for a "dummy" Polaroid -->
<figure data-dummy>
<a href="#" class="photostack-img"><img src="img/7.jpg" alt="img07"/></a>
<figcaption>
<h2 class="photostack-title">Lovely Green</h2>
</figcaption>
</figure>
<!-- ... -->
</div>
</section>
class="photostack-start"
dapat digunakan untuk menampilkan overlay awal pada wadah galeri. Setelah galeri diklik, item akan membuat langkah pertama mereka dan item pertama akan ditampilkan di tengah.Tag pada
class="photostack-back"
dapat digunakan untuk memasukkan beberapa info untuk bagian belakang Polaroid.Tag pada item "dummy" tidak akan menjadi bagian dari galeri yang di lihat. Hal ini dapat berguna dalam kasus di mana hanya sebagian dari koleksi gambar tertentu harus di tampilkan. Bayangkan sebuah artikel tentang perjalanan Anda di mana di setiap bagian Anda menggambarkan lokasi tertentu. Anda akan mengatur item yang tidak relevan sebagai "dummy" dan hanya Polaroid yang spesifik di lokasi tersebut yang dapat di lihat secara rinci. Pada bagian berikutnya Anda akan mengatur set lain pada item "dummy".
Perhatikan bahwa pembungkus utama
div
diatur dengan lebar dan tinggi 100%, yang berarti bahwa gambar akan tersebar di seluruh wadah. Jika kita ingin membuat gambat menyebarkan di ruang dengan kompak, kita juga bisa mengatur dimensi div
yang lebih kecil.Lihatlah beberapa screenshot dari galeri:
Sekian artikel kali ini, Saya harap Anda menikmati Scattered Polaroids Gallery (Tersebar) dan Anda dapat menemukan inspirasi dari artikel ini.
Sumber : http://tympanus.net/codrops/?p=18402
0 comments:
Post a Comment