Custom Animation Banner with jQuery

In today’s tutorial we 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.
We will be using the jQuery Easing Plugin and the jQuery 2D Transform Plugin to create some nifty animations.

The images used for the demo (mobile phones and tablet) are by talented Alex Gillis and you can find his amazing works on Deviantart. The Dell Vostro image is by Steven Housden and you can find his high quality works on his Deviantart page.

So, let’s get started!

The Markup

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.
We will now add some zones to the banner. These zones contain the images that we will animate in and out of the banner depending on the current step. The first zone will contain all the products. The second zone we will be using for the advertising punchline and the third zone will contain two different titles:

<div id="ca_banner1" class="ca_banner ca_banner1">
	<div class="ca_slide ca_bg1">
		<div class="ca_zone ca_zone1"><!--Product-->
			<div class="ca_wrap ca_wrap1">
				<img src="images/product1.png" class="ca_shown" alt=""/>
				<img src="images/product2.png" alt="" style="display:none;"/>
				<img src="images/product3.png" alt="" style="display:none;"/>
				<img src="images/product4.png" alt="" style="display:none;"/>
				<img src="images/product5.png" alt="" style="display:none;"/>
			</div>
		</div>
		<div class="ca_zone ca_zone2"><!--Line-->
			<div class="ca_wrap ca_wrap2">
				<img src="images/line1.png" class="ca_shown" alt=""/>
				<img src="images/line2.png" alt="" style="display:none;"/>
			</div>
		</div>
		<div class="ca_zone ca_zone3"><!--Title-->
			<div class="ca_wrap ca_wrap3">
				<img src="images/title1.png" class="ca_shown" alt="" />
				<img src="images/title2.png" alt="" style="display:none;"/>
				<img src="images/title3.png" alt="" style="display:none;"/>
			</div>
		</div>
	</div>
</div>

Notice, that we are using mostly two classes for each element. That is because we will define a common style and a style for each banner, since we can have more than one banner. In this example we will be looking at banner 1. In the Zip file and the demo you will see the other banner with only two zones.

Let’s look at the styling.

The CSS

First, we will define the style of the banner. It will have a padding and a tiny border which, together with an inset box shadow will create a nice border effect:

.ca_banner{
	position:relative;
	overflow:hidden;
	background:#f0f0f0;
	padding:10px;
	border:1px solid #fff;
	-moz-box-shadow:0px 0px 2px #aaa inset;
}

In the demo we also add the style of floating left since we want the two banners to be next to each other.
The custom style for banner 1 (i.e. its size) will be defined later.
The slide will basically just fill the banner element:

.ca_slide{
	width:100%;
	height:100%;
	position:relative;
	overflow:hidden;
}

The zones will be absolutely positioned. The custom zone styles will be defined later:

.ca_zone{
	position:absolute;
	width:100%;
}

The width is set to 100% because of some buggy behavior in Chrome when we slide things in and out. Like this, it will work without a problem.

The wrapper for the zone images will have the display:table-cell since we want to center the image inside. In some animations we will want to “zoom” the picture in and out, and this will make sure that it stays centered relative to its wrapper:

.ca_wrap{
	position:relative;
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}

And exactly because of that reason we will also have to force the shown images to have the display inline. You see, we cannot apply text-align center to block elements, but using jQuery to make things appear, will make them have the block display property. Like this we will be forcing the image to stay inline:

.ca_wrap img.ca_shown{
	display:inline !important;
}

Now, we will define the custom styles for banner 1 and its zones and wrappers:

.ca_banner1{
	width:650px;
	height:300px;
}

This background class we will apply to the div with the class “slide”:

.ca_bg1{
	background:#fff url(../images/bg.jpg) no-repeat top left;
}

The zones will get the information about the positioning and the wrappers will have the size of the image. Make sure that all the images in one zone are of the same size since we will use that in the JavaScript to define i.e. the maximum size when we zoom the images in:

.ca_banner1 .ca_zone1{
	top:0px;
	left:0px;
}
.ca_banner1 .ca_wrap1{
	width:320px;
	height:300px;
}
.ca_banner1 .ca_zone2{
	top:100px;
	left:240px;
}
.ca_banner1 .ca_wrap2{
	width:387px;
	height:203px;
}
.ca_banner1 .ca_zone3{
	top:32px;
	left:250px;
}
.ca_banner1 .ca_wrap3{
	width:378px;
	height:31px;
}

And that’s all the style! If you have another banner you will keep the numbering of the zones and wrappers but change the banner numbering. So, you will have to define the custom style for ca_banner2 and it’s zones and wrappers.

Let’s add some animations!

The JavaScript

Since our banner script works as a plugin, we will simply define some parameters for it.
The variable “steps” has the structure steps:[step1,step2,…,stepN].
For each step we define the transition of each zone/area in the banner.
For example, in the first banner we have 3 zones, each one with a specific number of images (the images inside of the “ca_wrap” div). One image is shown as default which is always the first one (1) in our examples.
Our first step/transition can be:

[{"to" : "2"}, {"effect": "zoomOutRotated-zoomInRotated"}],
[{"to" : "1"}, {}],
[{"to" : "2"}, {"effect": "slideOutRight-slideInRight"}]

This means that for the first transition, the first and third area is going to show its second image, and the second area remains untouched. When we change each image we apply a specific effect, which is defined in the plugin.

For our first banner we want 5 steps. So, let’s define what happens for each one:

$('#ca_banner1').banner({
	steps : [
		[
			//1 step:
			[{"to" : "2"}, {"effect": "zoomOutRotated-zoomInRotated"}],
			[{"to" : "1"}, {}],
			[{"to" : "2"}, {"effect": "slideOutRight-slideInRight"}]
		],
		[
			//2 step:
			[{"to" : "3"}, {"effect":"slideOutTop-slideInTop"}],
			[{"to" : "1"}, {}],
			[{"to" : "2"}, {}]
		],
		[
			//3 step:
			[{"to" : "4"}, {"effect": "zoomOut-zoomIn"}],
			[{"to" : "2"}, {"effect": "slideOutRight-slideInRight"}],
			[{"to" : "2"}, {}]
		],
		[
			//4 step
			[{"to" : "5"}, {"effect": "slideOutBottom-slideInTop"}],
			[{"to" : "2"}, {}],
			[{"to" : "3"}, {"effect": "zoomOut-zoomIn"}]
		],
		[
			//5 step
			[{"to" : "1"}, {"effect": "slideOutLeft-slideInLeft"}],
			[{"to" : "1"}, {"effect": "zoomOut-zoomIn"}],
			[{"to" : "1"}, {"effect": "slideOutRight-slideInRight"}]
		]
	],
	total_steps	: 5,
	speed : 3000
});

We defined the 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!