Happy Holidays

I'd like to recycle this good old experiment to wish all WR readers nice holidays, if any :D



See you soon next year with new web development adventures ;)

Tesla Experiment, aka JavaScript Lightnings

Hardware Accelerated Browsers are a great step forward for Web potentials, but not all of them are able to accelerate properly the canvas element.

When it comes to performances, we should be aware about those practices able to slow down consistently not that powerful devices such Netbooks and smart pad or phones.

The Tesla Experiment

This demo has a mere entertainment purpose and it is specially suitable for iPad since it becomes more funny via multi touch screens.

It is possible to customize almost everything via the Tesla class, and for the example page we can simply use the query string.

All properties has been explained in the source code of the index page, when the Tesla instance is initialized.

Here another configuration example ( more "Dragon Ball" style :D )


It has been interesting to test how the blur can destroy performances, as interesting was to realize that with current canvas API, a nicer FX as this one could be is quite impossible if performances matters for nowadays mobile devices.

Have fun with the experiment ;-)

JS And CSS3 Snow FX? Happy Holidays!

I was expecting some sort of snow experiment after one of my posts in Ajaxian but apparently nobody tried ... and there I am :)



Check out my JavaScript and CSS3 Snow Effect and have best holidays, I gonna fly tomorrow to meet my family and my friends for few days in Italy!

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