The Best Advanced Animation techniques you can perform using jQuery

The Best Advanced Animation techniques you can perform using jQuery

Posted by legacye in Resources on 09 15th, 2009 | no responses

When you think about animation on the internet, chances are some of the first tools that come to mind are Flash, Microsoft’s Silverlight and maybe even Animated GIFs. It has only been in the past couple of years that JavaScript and the frameworks built around it have really matured into languages that neatly support basic animation primes like chained time delays, basic motion and simple special effects – so it’s never been a better time to start experimenting with what they can do!.

jQuery supports functions like slideDown(), slideUp(), show(), hide(), fadeIn(), fadeOut() and fadeTo(), which although quite basic on their own, can easily be used in sequences to create some pretty visually impressive animations, whether you’re using images or just pure-CSS. In this post, I’m going to present some of the best examples of how other developers have used these these techniques to create impressive animations in their web applications.

An amazing animated parallax effect using CSS and jQuery

http://webdev.stephband.info/parallax.html

How to make an impressive animated landscape with jQuery

http://buildinternet.com/2009/02/how-to-make-an-impressive-animated-landscape-header-with-jquery/

Sprite Animations with jQuery – a really sleek example of a javascript based page turning effect for books

http://www.sitepoint.com/blogs/2007/07/20/javascript-sprite-animation-using-jquery/

Simulating 3D objects with a camera using jQuery and CSS

http://acko.net/blog/abusing-jquery-animate-for-fun-and-profit-and-bacon

A great example of chaining special effects in javascript to create a complete animation

http://css-tricks.com/jquery-robot/

Simulating animated Gravity effects with jQuery

http://blog.themeforest.net/tutorials/simulate-gravity-with-jquery/