Jquery Living Elements

Question

Кто-нибудь знает, как бороться с эффектом на http://2crossmedia.com/liv-multicolor/ Если щелкнуть текстовое поле, оно будет окружено изменяющей цвет линией. Код говорит, что это jquery. Но как :)?

Большое спасибо!

Answer 1

Это довольно круто.Он использует 3 изображения:

• 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

Маска является полупрозрачный png с прозрачными частями, через которые проходит градиент.Таким образом, они просто исчезают в градиенте за маской.Затем они просто панорамируют его, используя тайм-аут.Что-то вроде:

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

#gradient начинается с opacity = 0.Затем вы делаете что-то вроде: $("#gradient").fadeIn().

Answer 2

Если вы просмотрите исходные сценарии с помощью Firebug, вы увидите, что они анимируют фоновое изображение. Изображение многоцветное и шире, чем дисплей. Они меняют положение изображения, чтобы создать иллюзию того, что оно выцветает. Вот изображение , которое они используют.