JS Liquid Image

When Ajax was launched yeas ago, its main selling point to developers and users worldwide is that it has the ability to emulate certain applications. Ajax has pushed cloud computing as it offers efficient data manipulation without actual application downloads or plug-ins to the browser. Everything could be done online with the help of Ajax.

While Ajax is focused on data intensive functions, it has left out another important factor for a great website - animation and design. Using JavaScript in these functions would have been perfect for many users because it will not require additional plug-ins (such as Flash).

But the days of ignoring animation and design is nearly over. Developers are now recognizing the ability of JavaScript and porting that knowledge to non-data functions. Case in point: the JavaScript liquid image effect.

There are already hundreds of scripts that can show the ability of JavaScript to provide animation.  However, JavaScript liquid image provides the flowing animation. This simple function can be done and can provide a very creative effect in an online application.

There are various forms of coding that can be used but in this blog but we'll be using Andrea Giammarchi's code for JavaScript visual effects. Click here to view sample

Zero Dependence

A very simple but often ignored trick to ensure that animation and special effect is possible in JavaScript is to avoid dependence. Letting the effect work with other functions is still a good practice but optimization suggests zero dependence.

Pushing your effects to wait on other functions will simply delay your effects. Worst, the effects might not work at all especially when the previous function will not work. With zero dependence, the liquid image effect will work without any problem.

Of course, there are downsides to zero dependence. Among them is very limited interaction and limited functionality. But if you're just working on special effects, you don't need to wait for others to work.

Keeping it Small

There is always the tendency for some developers to focus on the effects instead of the substance of the application. Ajax and JavaScript based application are still programming techniques aimed to provide efficient data manipulation.

Special effects may provide the glitter needed in the application but data should always work first. The above given sample may look like a heavy function but the function only comes with 1.2kbs. The developer opted to minimize and grip the function to make sure that the function is very small.

Avoiding Canvass

The easiest way to get the animation in any programming language is to use canvass and stretch them according to users’ preferences. While this can work in liquid image effect in JavaScript, there are better ways.

Using popular image formats are a lot better compared to canvass because their pixilation can be easily kept intact even during the transfer. The flow will look a lot better when the pixilation is maintained. Canvass might be easier to implement but the quality is not as part compared to other image formats.