Capt. Horatio T.P. Webb
CAPT. WEBB FLIPS OUT
Multiple Image Displays using CSS properties

Parks -- Spring 2014
Version 1 -- Last Updated 11:00 AM 5/22/2014

Flip Duration: seconds

Forward Flip Backward Flip


There are 50 different images used ( clfi0001.gif, clfi0002.gif, clfi0003.gif, → ... clfi0050.gif))
The javscript code displays the images in the sequence based on the radio button that is checked:

if forward flips, the sequence is: clfi0001.gif → clfi0050.gif

if backward flips, the sequence is: clfi0050.gif → clfi0001.gif

The duration of the display for each is based in the value of the slider. Each image is displayed for:

   number of milliseconds = (duration in seconds from the slider) * 1000 / 50

This number is used as the second parameter in the javascript timer function like this:

   setInterval(function name to execute, number of millseconds)

the setInterval function repeats the named function over and over, waiting number of millseconds before executing the named javascript function again. (See instructions on how to code timers on our syllabus here)

All the images are placed in a div with id="capt" which has style: position:absolute;top:150px;
Each of the 50 images are has the style property: position:absolute;top:40px,left:40px;opacity:0.0;

Thus each image is: transparent (opacity=0.0); 190 pixels from the top of the page; and 40 pixels from the left.

The javascript code changes which image is displayed by setting the CSS opacity property to 1.0 to display the image and sets the opacity property to 0.0 to hide the image.

This could also have been done three other ways. To "display" or "not display" we could have used:

In all the cases, the critical animation aspects are: controlling position; display( using CSS: opacity OR display OR visbility OR z-index) and timing.

Here is the javascript code: