Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

Understanding Nivo Slider with CSS Transitions

Nivo Slider

A few days ago I made some image transition effects such as Nivo Slider. I know this is probably not good and useful experiment, but I think this is a fairly effective way to find out how Nivo Slider work.

First of all I made ​​three layers. Technically only two important layers, while the last layer only works as a wrapper. Then I changed the third layer into several pieces as well as pieces in Nivo Slider. I use CSS Transitions with different delay on each piece to create the animation, applying the same background image on each piece but with a different background position (CSS Sprites):

Nivo Slider

And here are some results:

Download 20 Kinds of Effects I Think

Well, that's how Nivo Sliders work. Each image on each slide is basically just the background of each piece layer that produced automatically. (Here I made it manually T_T). Nivo basically just take the information about the value from the title attribute, image width, image height and image URL's, while the images are not shown:

Nivo Slider

Then, if not shown, how these images can appear?

This is how Nivo create the magic:

Nivo Slider

He produced several pieces of the layer with a predetermined amount in the default setting automatically, adjust the coordinates position of each different piece by considering the width of an image that has been taken divided by the number of pieces that have been specified in default settings with .css(). And at the same time changing the background position on each piece automatically (background image is produced from the image URL's which has been taken). What do you think as an image really just an element that contains the background with the same image. Wonderful!

How about the delays? In this part approximately you can set the delay on each piece by hand:

Nivo Slider

Each animation type has its own delays. Try to check each code inside it. I've tried to change the number of delays and end up with quite well (quite broken). Don't do what I have done. It was very damaging and can destroy your life :p

Well, this is all just an experiment. If you feel that this is not useful, just ignore it.

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 4 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!