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 in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!

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!

  10. Now this is showing me stuff that I never thought jQuery could do so soon. Very well done!

  11. I know it won’t happen, but I wish that all those animated flash banners were replaced by jQuery. My browser keeps hanging for ages most of the time on those flash ads.

    Did I already say that you made (again) an awesome tutorial? No, he?

    Well, here you go then.
    Awesome tut!!! 🙂

  12. Wooow….. great tutorial.
    I think it uses flash ….. it turns out ….
    I love your tutorials

  13. How can i put the banner2 to the “Beautiful Background Image Navigation with jQuery” on the right side? Please help…

  14. As a very new web designer, I have to thank you so much for sharing your jquery development. I am amazed at what you can do…..we’re not worthy…..

    Seriously though, this is the best website I have come across, so please keep up the great work and you will make me very happy!

  15. Hi Mary Lou,

    As previously stated I think your work is great, however I have found a bug in IE8…….yes we all hate it.

    The second banner works great until the transform kicks in, it then shows thick black 3D like images for the duration of the time you stay on the page.

    I tried implementing this and thought it was my error, however it’s the same on your demo, any thoughts……..?

  16. This is one of the awesome tutorial and demo i have seen for Banner/slideshow. Amazing !
    Thanks for sharing.

  17. Verry nice… but tell me how to add a link (herf=””) it works only on the first image… next it’s no image…

    Any one have this problem?

  18. Thank-you, thank-you, thank-you! You just made my life (tonight, at least :P) so much easier!

  19. > since the fading does not work
    > properly in IE with semi-transparent images

    The solution for fading effect is to add in animate() properties map to animate void filter property: {‘filter’: ”, …}

  20. 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!

  21. 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

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

    Thanks

  23. 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

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

  25. 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?