Create Custom Animated Banner with jQuery

October 20, 2010 Admin

0 Shares

Create Custom animation banner idea with jQuery is to have different elements in a banner that will animate step-wise in a custom way.
We will be using the jQuery Easing Plugin and the jQuery 2D Transform Plugin to create some nifty animations.

Features:

There are following 11 animations in the plugin (3 are commented in the code since the fading does not work properly in IE with semi-transparent images, IE blackens out the semi-transparent parts; if you have GIF or PNG-8 images you can use those animations without a problem):

zoomOut-zoomInRotated
zoomOutRotated-zoomInRotated
zoomOut-zoomIn
slideOutRight-slideInRight
slideOutLeft-slideInLeft
slideOutTop-slideInTop
slideOutBottom-slideInTop
slideOutTop-slideInBottom
fadeOut-fadeIn commented
fadeOut-zoomIn commented
zoomOut-fadeIn commented

You can, of course, define your own animations, just add them to the “switch(effect)” part of the plugin.

And that’s it! We hope you enjoyed this tutorial and found it useful!

Requirement: jQuery
Demo: http://tympanus.net/Tutorials/CustomAnimationBanner/
Download: http://tympanus.net/Tutorials/CustomAnimationBanner/CustomAnimationBanner.zip
Website: http://tympanus.net/codrops/2010/10/18/custom-animation-banner/

0 Shares