title

flip flop javascript

This script alternately "flips" and "flops" between two images, with adjustable smoothness, speed and pauses. It may be useful as an alternative to a crossfade, where you want to create movement to attract attention, or where you want to show two images with equal prominence that don't necessarily look well together (I wrote it to show two dissimilar corporate logos). Small images are less taxing on system resources and will appear smoother in operation.

It is important that:

  1. All images are square and of the same size, and
  2. The difference between "wdmax" (maximum width of square image) and "wdmin" (minimum thickness edge-on image) is an exact multiple of "inc" (the step change); otherwise the images will flip once and disappear.

You will have to change the "wdmax", "wdmin" and "inc" variables, and the width and height parameters within the image tag(s) to suit your own images. You will also need to tinker with the table cell sizes to get it all to look right (assuming your images are a different size to mine). If only requiring movement in one direction, set the "ff" variable to it, and delete or change the subsequent resetting of this variable accordingly.

Which version suits your purpose? Right-click in the relevant frame and choose "View Source" to pinch the code.

SINGLE FLIP FLOP

MULTIPLE FLIP FLOP A

MULTIPLE FLIP FLOP B