Loops don’t always do it when you’re looking to display a stream of images on a page, spaced by time. So if you want to make a flipbook video you’re going to have to be constructive with how you get the images onto the page, one after the other, and in the right order.
Y’see, a loop runs – full stop. You can’t affect the speed at which a for-loop, $.each loop or any other kind of loop runs. It just runs.
So if you have a list of 20 images in an array and you simply loop through that array the effect will happen so fast you’re likely only to register the fact that the last image has loaded.
What you ACTUALLY want to do is to:
- Create a variable containing a starting-number (0 or 1)
- Show the 1st image based on that number
- Add 1 to the variable
- Show the 2nd image …
- So on and so forth.
This is fairly easy to achieve – copy the code below, change the images location to match where you’ve stored your images, and voila, away you go!
To help you along with that, here’s a zip file with the images I used. Of course you can always make your own – why, you could even animate an entire feature-length cartoon using this method!
Share and enjoy, that’s what I always say!