Jquery Living Elements

Question

Hi there! Does anybody know how to deal with the effect at http://2crossmedia.com/liv-multicolor/ If you click into the text field, its surrounded by a color-changing line. The code says it's jquery. But how :) ?

A lot of thanks!

Answer 1

If you view the source of the scripts using firebug, you can see that they are animating the background image. The image is mulicolor, and wider than the display. They are changing the position of the image to give it the illusion that it is fading colors. Here's the image they are using.

Answer 2

That's pretty cool. It uses 3 images:

• http://2crossmedia.com/liv-multicolor/images/input-mask.png
• http://2crossmedia.com/liv-multicolor/images/gradient.png
• http://2crossmedia.com/liv-multicolor/images/input-bg.png

The mask is a semi-transparent png with transparent parts where the gradient comes through. So they just fade in the gradient behind the mask. Then they just pan it using a timeout. Something like:

<div id="bg"></div>
<div id="gradient"></div>
<div id="front"></div>

#gradient starts out with opacity = 0. Then you do something like: $("#gradient").fadeIn().