Skip to main content

TV switch on/off effect using JavaScript

The script.aculo.us 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.

MatrixTeo.net 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.

Labels:

Comments

  1. AnonymousAugust 9, 2009 at 11:51 PM

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

    ReplyDelete
  2. Kaushik PatowaryAugust 10, 2009 at 10:24 AM

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

    ReplyDelete

Post a Comment

Popular posts from this blog

How to Schedule Changes to Your Facebook Page Cover Photo

Facebook’s current layout, the so called Timeline, features a prominent, large cover photo that some people are using in a lot of different creative ways. Timeline is also available for Facebook Pages that people can use to promote their website or business or event. Although you can change the cover photo as often as you like, it’s meant to be static – something which you design and leave it for at least a few weeks or months like a redesigned website. However, there are times when you may want to change the cover photo frequently and periodically to match event dates or some special promotion that you are running or plan to run. So, here is how you can do that.
1 comment
Read more

69 alternatives to the default Facebook profile picture

If you have changed the default Facebook profile picture and uploaded your own, it’s fine. But if not, then why not replace that boring picture of the guy with a wisp of hair sticking out of his head with something different and funny?
332 comments
Read more

How to remove watermark from an image or picture

A watermark is any recognizable text, logo or pattern that appears over an image to identify the owner of the image and generally used to prevent unauthorized reuse of the image. Watermarks are usually transparent and can be difficult to remove. The difficulty or ease of removal depends on the content of the image and the position, color, size etc of the watermark.
210 comments
Read more