My JavaScript book is out! Don't miss the opportunity to upgrade your beginner or average dev skills.

Saturday, September 19, 2009

JavaScript Liquid Image FX

Yesterday I have been in Brixton Academy for Massive Attack concert: amazing!

I have been totally impressed by their choreography: it looked apparently rudimentary stuff but once they started playing I could not avoid to think all the time how beautiful special effects are and how simple, sometimes, they could be for a stunning result.

Liquid FX

I cannot forget my ActionScript Developer past and of my favorite coded special effects has always been the liquid one. What is a liquid effect? Here a preview:

Test Liquid FX Directly In Your Browser

Well, if the preview image is not explicative enough, I am sure this demo page is :)

Update, this Sony VAIO Flash Style Splash Page could be interesting as well, isn't it? And all in 14Kb images, JS, and layout included ;)

How Does Liquid Work

There is a Liquid function, and its configuration object:


// image src, whatever format

// element to use as Liquid FX container
target: document.getElementById("fx") // $("#fx")[0] for lazy people,

// 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 of the FX
callback:function(){alert("it's Liquid!")}

// NEW IN V1.3

// optional onload to perform some operation after the image has been loaded
onload:function(){FX not started yet but image loaded}

// optional reverse property over a completed liquid FX

New in version 1.3, the Liquid function returns the configuration object and it adds two methods: pause and play.
Specially pause is useful to stop FX if we need to clean the target container.
// pause/play example
var lq = Liquid({
}, 500);
}, 500);

This is pretty much it, so far. I am planning to implement a LiquidReversed function as well, in order to let the images disappear in the same way they appear.
The source code with Mit Style License is here while the inspiration is from my 2005 ActionScript 1 imageStretcher code.



Aaron Heckmann said...

Nice work. It beautiful in its simplicity. said...

super cool JavaScript code, thks for sharing

Andrea Zecchini said...

Scusate ma non ho capito come costruire il file liquid.php, senza non mi funzione

Andrea Giammarchi said...

Andrea English please, comunque sia c'e' un link al sorgente ed i miei credits da inserire.
Non devi creare nessun file php e ovviamente essendo JavaScript s enon includi la libreria come puo' funzionare?

Anonymous said...

Posso usarlo insieme ad altri framework js come jQuery?

Anonymous said...

Awesome! Are you open-sourcing it?

Yoshi said...

This is really cool!

Any chance of posting a much more simple example?

In trying to see what you have done with your two demos, its kind of hard to follow. The javascripts that you include (liquid.php, viao.php) don't look too much like the code you posted for download, or in your short script explaining how to use it.

Maybe just a single image like the viao example that links to the liquid.javascript only, with any controlling scripts in the page itself.

Thanks in advance.

Andrea Giammarchi said...

being unobtrusive this FX will work with every library that does not define a global Liquid variable/function

@Yoshi liquid.php and viao.php are just JavaScript files, the fact they are .php is just to serve them gzipped in that cheap host.
Please read comments and do some test, it's really simple.

If there anything you don't get in comments I'll try to better explain.


Andrea Giammarchi said...

the Open Source code with Mit Style License is here:

Mario Andrade said...

I've been trying to get the effects to work on my computer but without success.

I even downloaded the demo page and still didn't work.

I changed liquid.php and vaio.php to liquid.js and vaio.js where it was needed but the effects still didn't work.

Could you please do a step by step tutorial on how to implement the effects on a webpage?

I'm a web designer not a developer so any help I can get I appreceate it.

thanks in advanced.