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:

Liquid({

    // image src, whatever format
    src:"myimage.png",

    // 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
    reverse:true
});

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({
    src:"mycoolimage.gif",
    target:document.body,
    onload:function(){
        setTimeout(function(){
            lq.pause();
            setTimeout(function(){
                lq.play();
            }, 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.

enjoy