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

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:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 87

Comments are closed.
  1. 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?

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

    Thanks
    -stephan

  3. 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……

  4. Hi mary,
    Thanks for this wonderful script.

    Is there any way to do a Cross fade transition beetween the current and the next image ?

    Thank you in advance for your help

  5. Woups, I forgot to ask about the number of slides … I tried to add 2 slides to have 7 so
    I added the images in the
    added 2 steps : [ ], in the list
    and changed : the total_steps : 7

    It still shows only the 5 first slides, and then stay longer on the 1st ( maybe the time it should be showing the 6th and 7th .. )

    … Did I forgot a parameter somewhere ?

    Thanks again …

  6. Again !

    Sorry … Forget about my 2nd question … my bad … I finally found my mistake.

  7. Great work!!!!!

    i have a little problem becoz i m new to this, any body knew the answer plz reply

    when i want to increase the number of banner2(images) ,
    but it did not work.
    it only gives first 2 images in banner2

  8. Really cool!
    Can you think of an easy way to stop animation on “mouse over banner” an resume the animation when the mouse leaves the banner?

  9. Hi
    Great work its amazing..
    Im trying to replace the title with text instead of images, it doesn’t work.. only the first title appears repeatedly on the slider 🙁 what will i do? please help..
    Thanks in advance

  10. Hi
    what a great work!
    i just want to know how to add more slid e(images, title and lines).

    i need that urgently.

    thanks,

  11. This is amazing and very easy to use and implement so thank you. My questions is I want the phone image to be a different size but when I put in a different image to all the phones the first one stays the size and the rest shrink down to the phone image size. I did change the css to match but it still squishes the image. How do I solve this? Thank you

  12. Anyone have an idea on how to make the images links? If you wrap any image in the a tag, the animation stops working.

  13. I would like to how to stop the loop and end on the last image. Also this is a great site I’m getting back into Java and away from flash so thanks!!!

  14. If apply a href to make links don´t works and object disappears . Can anybody tell me how ad a link to banner (all size and all sequence)

    many thanks

  15. for example on code:

    I use href like:

    *edited: please write your html using pre and code

    But only works fine first link, second and third don´t works and don´t shows images

    Any help please?

    Many thanks

  16. no luck for me trying href on banner, someone knows a solution to make a link on banner (all space, all time animation)

  17. Excellent job Mary Lou, I found this quite useful, to the website design I was trying to achieve. Thank you!!