Thursday, September 24th, 2009
JavaScript Liquid Image FX
Category: JavaScript
Inspired by its conceptual simplicity, Andrea Giammarchi ( cough, the newest Ajaxian, cough ) has revisited an old ActionScript 1.0 Image effect making it lightweight, 1.2Kb minified and gzipped, and portable, thanks to its cross-browser nature and zero libraries dependencies. Last but not least, it’s 100% JavaScript, and without canvas.
The theory is simple: expanding a div with an image as background, and moving a stretched image in the opposite direction, it is possible to adjust some pixel in order to find a match point between the last part of the expanded background and the moved image.
The practice is even more simple: a Liquid function call with a configuration object.
- var fx = Liquid({
- // image src, every supported format
- src:"myimage.png",
- // element to use as Liquid container
- target: document.getElementById("fx")
- // or $("#fx")[0] for some guy,
- // optional direction, left by default
- // accepted: left, right, bottom, top
- direction: "left",
- // optional scale factor, 2000% by default
- // it is how much the image should be stretched
- scale: 2000,
- // optional speed, 1 to whatever, by default 10
- speed: 10,
- // optional callback, will be executed at the end
- callback:function(){alert("it's Liquid!")},
- // optional onload to perform some operation
- // after the image has been loaded
- onload:function(){/*FX not started yet*/},
- // optional reverse property
- // performed only over a precedent liquid FX
- reverse:true
- });
- // fx variable will have two methods
- // fx.pause()
- // to stop the animation
- // fx.play()
- // to re-enable it after a pause
- // these two effects are available only
- // during animation time, removed
- // before optional callback call
Being this effect based on just 2 DOM nodes, even mobile devices such Android and iPhone can show it with a reasonable rendering time.
Here you can find the source code while to give it a try you have Demo 1, with Firefox logo, and Demo 2 , with VAIO one, thanks to its smooth lines specially suited for this effect.
very nice. Less == More
My praise to Andrea.
Can I suggest you a cough syrup?
Very cool effect.
very cool & good code, thank you very much for sharing.
Can I share this snippet on my JavaScript library?
Awaiting your response. Thank
That is a very nice effect. :)
kentaromiura,
Funny, the effect reminded me of my cough syrup days. o_O
Thanks everybody. The code is open source with Mit Style License so as long as this license is respected you can do whatever you want.
Wow. Very performant, even on IE 6.
This is gr8. It would even more awesome if it were integrated into other librabries as a plugin. For example if it were in jQuery then you would be even smaller and able to do aminations of multiple objects.
ChiragNirmal, the advantage of zero dependencies code is that any library could integrate this FX without problems/effort.
On the other hand, being the main goal speed in every browser, mobile device included, any lib layer could have slightly reduced performances, specially during the execution.
The function can run simultaneously in multiple images and different directions without problems, but I think in this way, and after a month, from “gr8”, it will become “b0ring”, don’t you agree? :-)
Whoa. This is officially the awesomest js trick I’ve seen in a few years. Nice job.
Yes, everything depends on the requirements. I think its gr8 that you made it MIT license so people can customize it as per their requirments. Thanks!