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):
And here are some results:
- Example 1- SliceUp Right
- Example 2 - SliceUpDown Right
- Example 3 - Rotating Slices
- Example 4 - Slice Curtain
- Example 5 - Horizontal Slices
- Example 6 - Images With Caption
- More examples are in the downloaded files
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:
Then, if not shown, how these images can appear?
This is how Nivo create the magic:
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:
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.
Sumber https://www.dte.web.id/