Dragonfly SlideShow | Buku Catatan si Ugi

Demonstrasi ini dapat menampilkan bagaimana CSS dapat menghasilkan slideshow yang dapat disejajarkan dengan slideshow yang diciptakan dengan menggunakan jQuery/ javascript.

Pada Navigasi, saat hover pada panah Prev/ Next, kita dapat melihat thhumbnail gambar sebelumnya/ berikutnya dan ketika mengklik thumbnail tersebut, maka kita dapat melihat gambar besar sesuai dengan thumbnail gambar yang ditampilkan.



Navigasi lain dapat terlihat pada enam tombol di bawah gambar besar, dengan fungsi yang sama sebagai navigasi, kita juga dapat melihat thumbnail gambar saat hover pada tombol-tombol tersebut dan ketika mengklik salah satu tombol, maka kita dapat melihat gambar besar sesuai dengan thumbnail gambar yang ditampilkan.


Setiap gambar memiliki text deskripsi dengan efek blur yang akan ditampilkan pada saat perubahan pada gambar besar.

Selain efek blur pada Text, animasi juga dapat terlihat pada gambar besar saat perubahan gambar, dimana gambar seolah olah terbang sebagaimana layaknya seekor capung/ Dragonflay yang sedang terbang. Mungkin karna alasan tersebut CSSplay menamainya dengan nama Dragonfly SlideShow.
Dragonfly Slide Show

Demo Dragonfly SlideShow







Musium

Sepanjang Jalan Malioboro

Dalam Perjalanan

Jembatan Sayidan

Warung Angkringan

Caffe Dewo









Photos copyright © Buku Catatan si Ugi | Yogyakarta





0 komentar:

Post a Comment



Catatan :

Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon







 

Anda sudah mengaktifkan penyaringan konten ( AdBlocker di Aktifkan )

Mohon maaf untuk sementara Anda tidak dapat melihat halaman ini, silahkan kembali lagi setelah Anda menonaktifkan filter yang Anda gunakan. Abaikan