Dragonfly SlideShow
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.
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