Tutorial: Color changing liquid effect with jQuery
Posted in Development, Tutorial, Webdevelopment, jQuery on October 4th, 2010 by admin – 2 CommentsThis tutorial is on how to archieve a color changing liquid effect (like this one) with jQuery. It’s actually quite easy to implement, altough there is a small trap. It’s made with plain CSS2 and will run in every modern browser (note: I don’t consider IE6 as a “modern browser”).
The trick is to use three layers: The first is the symbol or the text, with the essential parts left transparent, the second is a gray layer with a transparent wave at the bottom an the last is a solid CSS-background-color. With some jQuery-magic to animate the second layer you can create an effect of wavy liquid.
read more »
