Custom Animation Banner with jQuery

In today’s tutorial Mary Lou will be creating a custom animation banner with jQuery. The idea is to have different elements in a banner that will animate step-wise in a custom way. She will be using the jQuery Easing Plugin and the jQuery 2D Transform Plugin to create some nifty animations. Just choose your images and lets get started.

 

The HTML of the banner will be a main div and a slide div. The slide div is only needed if you want some nice border effect around the banner. Mary Lou will now add some zones to the banner. These zones contain the images that she will animate in and out of the banner depending on the current step. The first zone will contain all the products. The second zone she will be using for the advertising punchline and the third zone will contain two different titles.