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: Design every part of your website with the brand new Divi Theme Builder. Try it for free.

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:

Mary Lou

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. Great script and tutorial, however since I’m quit the newbee when it comes to javascript/jquery, I can’t seem to figure out how to create a “SlideOutLeft-SlideInRight” (or vice versa) variation. Any help would be appriciated much!

    tnx!

  2. Hi,
    sorry.. just want to know why my comment wasn’t published, any problem?

    P.S
    was asking for help about linking any of the images.

    Thanks

    • Hi Lincoln, I am really sorry, it must have been lost in the spam I guess, do you mind reposting it? Cheers, ML

  3. hi Mary,
    which one of the areas in the banner is most suitable to use as a link
    example
    (

    Thanks

  4. Hello Lincoln, you don’t need to keep posting question marks, I have read your comment. So here is what you do: take the div that has the class ca_zone and make it a link element, and try it out. You might need to adapt the style of the image inside of those a tags. Hope it helps, ML

  5. Fantastic plugin – thank you!
    Any hints please on how to stop on the final step without continuously looping? Thanks.

  6. wonderful script, but i’m trying to add my own line of text using some PNGs (using photoshop cs3), but when i include my png into the script its looks pixelated. is it my PNG or what?

  7. Hello Mary!
    Thnx for this great script and tutorial.
    Few questions i really wanna ask:

    – is it possible to make in one banner lines with different speed, so they change one after another, or appear while one is already shown.

    – if no, is it possible to use animated gif?

  8. Hi there,
    thanks for the nice tutorial.
    What is the easiest way to stop all animation on hover?

    Thanks
    -stephan

  9. hi mary ! thanks for this wonderful script. but dear i have prob. how can i use my cufonated text in place of 40 % text. ?

    thanks in advance……

    please reply must……