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 […]
customAnimationBanner

From our monthly sponsor: monday.com is the last team management and design process tool you’ll ever need. Start your free trial.Advertisement

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!

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Receive our bi-weekly Collective or official newsletter right in your inbox.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 87

Comments are closed.
  1. Wow, really rocking jQuery use. I never liked Flash banners, but these non-Flash ones are really cool.

    Great work

  2. Wow really good and well done. I think this one is so good that it could directly be used in production!

  3. Brillant. It would be really nice to pause animations when mouse hovering though.
    Nice one!

  4. I see some bugs in Chrome.
    In the main frame/window, the new phone pops up fine, but the new text always seem to pops up more to the right, so after a while you only see the new phone change.
    In the left frame, the same thing happens, only the phone and the text
    always pop up more to the down side, so after a while you only see a part of the phone.

  5. its like a header rotation or slider…
    hohoho, so clever so clever…
    thank a lot master…
    cheers ^^

  6. When I redevelop The Easy API – http://theeasyapi.com – I am going to be using so much from your tutorials. Not only do you guys show the nifty cool thing you can do with jQuery but it looks amazing! That is what really sets your tutorials apart from others such as .. oh say .. tuts+. As always very nice and you guys are wickedly talented.

  7. Javascript is really very powerfull scripting language and this is an example of it. I really love jQuery. Very awesome work.

  8. All your articles of jquery is really great articles. I appreciate your contribution to the web design community.Thanks

  9. Definitely cool!
    But It waste alot of CPU! Just Open Activity Monitor (Task Manager) and take a look at Firefox process with only demo page of this tutorial.
    Its not realizable!