Image CrossFade Example

Ben Yanis,
Share and Enjoy.
Credit to for the original version of the opacity changing code.

This example demonstrates how to create image crossfades, that can produce a "TV" effect on your website. It's done with CSS and Javascript, and it validates as xhtml 1.1.

A copy can be downloaded here.

The technique itself is fairly simple:

This example uses PNGs, but you can do it with any type of image. I like PNGs, as they let me make the textured "TV" shape. You can add as many pictures to the animation as you like, just adjust the frameCount accordingly. Additionally, you can change the transition speed and frequency by modifying the interval and transitionTime variables.

If you need assistance, contact me through the website.