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.

javascript
< view plain text >
  1. var fx = Liquid({
  2.  
  3. // image src, every supported format
  4. src:"myimage.png",
  5.  
  6. // element to use as Liquid container
  7. target: document.getElementById("fx")
  8. // or $("#fx")[0] for some guy,
  9.  
  10. // optional direction, left by default
  11. // accepted: left, right, bottom, top
  12. direction: "left",
  13.  
  14. // optional scale factor, 2000% by default
  15. // it is how much the image should be stretched
  16. scale: 2000,
  17.  
  18. // optional speed, 1 to whatever, by default 10
  19. speed: 10,
  20.  
  21. // optional callback, will be executed at the end
  22. callback:function(){alert("it's Liquid!")},
  23.  
  24. // optional onload to perform some operation
  25. // after the image has been loaded
  26. onload:function(){/*FX not started yet*/},
  27.  
  28. // optional reverse property
  29. // performed only over a precedent liquid FX
  30. reverse:true
  31. });
  32.  
  33. // fx variable will have two methods
  34. // fx.pause()
  35. // to stop the animation
  36.  
  37. // fx.play()
  38. // to re-enable it after a pause
  39.  
  40. // these two effects are available only
  41. // during animation time, removed
  42. // 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.

Related Content:

Posted by webreflection at 6:30 am
13 Comments

+++--
3.9 rating from 51 votes

13 Comments »

Comments feed TrackBack URI

very nice. Less == More

Comment by Transfinite — September 24, 2009

My praise to Andrea.
Can I suggest you a cough syrup?

Comment by kentaromiura — September 24, 2009

Very cool effect.

Comment by iliad — September 24, 2009

very cool & good code, thank you very much for sharing.

Can I share this snippet on my JavaScript library?

Awaiting your response. Thank

Comment by JavaScriptBankoCOM — September 24, 2009

That is a very nice effect. :)

Comment by Darkimmortal — September 24, 2009

kentaromiura,

Funny, the effect reminded me of my cough syrup days. o_O

Comment by eyelidlessness — September 24, 2009

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.

Comment by webreflection — September 24, 2009

Wow. Very performant, even on IE 6.

Comment by someguynameddylan — September 24, 2009

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.

Comment by ChiragNirmal — September 24, 2009

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? :-)

Comment by webreflection — September 24, 2009

Whoa. This is officially the awesomest js trick I’ve seen in a few years. Nice job.

Comment by functionform — September 24, 2009

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!

Comment by ChiragNirmal — September 24, 2009

Leave a comment

You must be logged in to post a comment.