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/
