Sunday, August 9, 2009

TV switch on/off effect using JavaScript

The JavaScript library has an effect called “Effect.SwitchOff” that can be used to hide elements on a page accompanied by an effect similar to the shutdown of old cathode ray tube televisions. You can try out the demo here. As you can see, the effect though a clever one is not very convincing. has created an enhanced version of Effect.SwitchOff. He used Effect.SwitchOff coupled with some additional JavaScripts and CSS, and created a very realistic TV switch off effect.

He used two DIVs – one DIV carries the image or the movie as we will call it, and the other is a container that represents the TV. The TV frame is a GIF image with a transparent area to show the movie through. The second DIV is positioned on top of the first DIV using the z-index property. Two functions, one to turn on the TV with a fade and one to power it off are added to control the TV. See the result below.

It’s in Spanish Italian. “Spegni la tv!”  is Turn OFF and “Accendi” is Turn ON.

The script is available for download. It can be used in blogs and websites to add a nice touch to animated GIFs or even static images.


  1. I'm not 100% sure (i'm french) but i'm pretty sure it's italian not spanish...

  2. Hmm... I don't know why I thought it's Spanish, but you are right, it's Italian.


Popular Posts