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.

4 Komentar

  • Admin

    Tapi saya masih bingung :(

  • Taufik Nurrohman

    @Eko Tri: Terserah hehe...

  • Unknown

    ya ampunnnn kapan bisa gini ya Ni orang hebat banget dah coding nya

  • Taufik Nurrohman

    @Zh!nTho: Hehe.. bisa saja.

Komentar telah ditutup.