Creating a Rotating Billboard System with jQuery and CSS

billboard

Currently we are in the “hey, let’s do that flash thing in jQuery”-mood and so we came up with another idea: a rotating billboard system.

In this tutorial we will use some images, CSS and jQuery to create the effect of a rotating billboard with two ads. The idea is to make one set of image slices disappear while another one (the other ad) appear. We will decrease the width of each disappearing slice and increase the width of each appearing slice. This will give the effect of rotating slices, just like in a rotating billboard system.

Ok, let’s start coding!

1. The HTML

We will have quite a lot of markup for the image slices – it will be 22 slices for each ad:

01 <div class="container">
02 <div class="ad">
03 <div id="ad_1" class="ad_1">
04 <img class="slice_1" src="ads/ad1_slice01.jpg"/>
05 <img class="slice_2" src="ads/ad1_slice02.jpg"/>
06 <img class="slice_3" src="ads/ad1_slice03.jpg"/>
07 <img class="slice_4" src="ads/ad1_slice04.jpg"/>
08 <img class="slice_5" src="ads/ad1_slice05.jpg"/>
09 <img class="slice_6" src="ads/ad1_slice06.jpg"/>
10 <img class="slice_7" src="ads/ad1_slice07.jpg"/>
11 <img class="slice_8" src="ads/ad1_slice08.jpg"/>
12 <img class="slice_9" src="ads/ad1_slice09.jpg"/>
13 <img class="slice_10" src="ads/ad1_slice10.jpg"/>
14 <img class="slice_11" src="ads/ad1_slice11.jpg"/>
15 <img class="slice_12" src="ads/ad1_slice12.jpg"/>
16 <img class="slice_13" src="ads/ad1_slice13.jpg"/>
17 <img class="slice_14" src="ads/ad1_slice14.jpg"/>
18 <img class="slice_15" src="ads/ad1_slice15.jpg"/>
19 <img class="slice_16" src="ads/ad1_slice16.jpg"/>
20 <img class="slice_17" src="ads/ad1_slice17.jpg"/>
21 <img class="slice_18" src="ads/ad1_slice18.jpg"/>
22 <img class="slice_19" src="ads/ad1_slice19.jpg"/>
23 <img class="slice_20" src="ads/ad1_slice20.jpg"/>
24 <img class="slice_21" src="ads/ad1_slice21.jpg"/>
25 <img class="slice_22" src="ads/ad1_slice22.jpg"/>
26 </div>
27 <div id="ad_2" class="ad_2">
28 <img class="slice_1" src="ads/ad2_slice01.jpg"/>
29 <img class="slice_2" src="ads/ad2_slice02.jpg"/>
30 <img class="slice_3" src="ads/ad2_slice03.jpg"/>
31 <img class="slice_4" src="ads/ad2_slice04.jpg"/>
32 <img class="slice_5" src="ads/ad2_slice05.jpg"/>
33 <img class="slice_6" src="ads/ad2_slice06.jpg"/>
34 <img class="slice_7" src="ads/ad2_slice07.jpg"/>
35 <img class="slice_8" src="ads/ad2_slice08.jpg"/>
36 <img class="slice_9" src="ads/ad2_slice09.jpg"/>
37 <img class="slice_10" src="ads/ad2_slice10.jpg"/>
38 <img class="slice_11" src="ads/ad2_slice11.jpg"/>
39 <img class="slice_12" src="ads/ad2_slice12.jpg"/>
40 <img class="slice_13" src="ads/ad2_slice13.jpg"/>
41 <img class="slice_14" src="ads/ad2_slice14.jpg"/>
42 <img class="slice_15" src="ads/ad2_slice15.jpg"/>
43 <img class="slice_16" src="ads/ad2_slice16.jpg"/>
44 <img class="slice_17" src="ads/ad2_slice17.jpg"/>
45 <img class="slice_18" src="ads/ad2_slice18.jpg"/>
46 <img class="slice_19" src="ads/ad2_slice19.jpg"/>
47 <img class="slice_20" src="ads/ad2_slice20.jpg"/>
48 <img class="slice_21" src="ads/ad2_slice21.jpg"/>
49 <img class="slice_22" src="ads/ad2_slice22.jpg"/>
50 </div>
51 </div>
52 </div>
53
54 <div class="billboard"></div>

For these images, 22 slices (each slice 35 pixels wide) of a 770 pixel wide and 340 pixel high image were made. One might think that this is a lot of work and that we could actually take one whole picture and create divs acting like the slices with that background image and the right background position. But then we would not be able to create the same effect of a rotating slice (at least not with the JavaScript we created for this showcase).

The billboard will be an absolute positioned div with the billboard image. Since the image has some transparent spotlights, we want to lay it over the ad container.

2. The CSS

The style for the billboard frame will be the following:

1 .billboard{
2 position:absolute;
3 bottom:0px;
4 left:50%;
5 margin-left:-447px;
6 width:916px;
7 height:599px;
8 background:transparent url(../images/billboard.png) no-repeat 0px 0px;
9 }

To position the element in the center of the page, we set the left value to 50% and the left margin negatively to half of the width of the element.

The container for the ads will have the same style like the billboard, except the background-image. We do that, because we need to position the containing elements at the same place like the billboard. We don’t want to place the ads inside of the billboard because we need the billboard to be on top of them. So, we do this trick and create another element with the same positioning:

01 .container{
02 position:absolute;
03 bottom:0px;
04 left:50%;
05 margin-left:-447px;
06 width:916px;
07 height:599px;
08 }
09 .ad{
10 width:800px;
11 height:336px;
12 position:relative;
13 margin:35px 0px 0px 60px;
14 background-color:#333;
15 }
16 .ad_1 img{
17 width:35px;
18 height:336px;
19 position:absolute;
20 }
21 .ad_2 img{
22 width:0px;
23 height:336px;
24 margin-left:18px;
25 position:absolute;
26 }

The slices of the ad images will be 35 pixels wide. The slices of the second ad will have the same width, but initially we need to set it to 0. We also need to set the left margin of the second slices to 18 pixels since we want to create the rotating effect. I will explain more about this value after we define the CSS for the slices.

The single slices need to be positioned:

01 .slice_1{left:0px;}
02 .slice_2{left:36px;}
03 .slice_3{left:72px;}
04 .slice_4{left:108px;}
05 .slice_5{left:144px;}
06 .slice_6{left:180px;}
07 .slice_7{left:216px;}
08 .slice_8{left:252px;}
09 .slice_9{left:288px;}
10 .slice_10{left:324px;}
11 .slice_11{left:360px;}
12 .slice_12{left:396px;}
13 .slice_13{left:432px;}
14 .slice_14{left:468px;}
15 .slice_15{left:504px;}
16 .slice_16{left:540px;}
17 .slice_17{left:576px;}
18 .slice_18{left:612px;}
19 .slice_19{left:648px;}
20 .slice_20{left:684px;}
21 .slice_21{left:720px;}
22 .slice_22{left:756px;}

By positioning the elements one more pixel to the left than they are actually wide, we create a little gap between the them. Now, the left margin has a value of 18 pixels because it is half of a slice plus its gap. We set this because we want the slices to appear (or disappear) from (or to) their center and not just from the side. If we simply set the width of a slice to 0 pixels the image will not seem to be rotating.

And that is all the CSS. For the additional fancy background images you can check out the downloadable version below.

Let’s create the rotating effect with jQuery.

3. The JavaScript

We will now create a function for rotating the slices. The function will make the first ad slices disappear by making their width 0 pixels. To achieve the rotating effect, we add a left margin of 18 pixels.

While the first ad slices disappear we make the others appear by removing the left margin of 18 pixels (that we initially set in the CSS) and giving them a width of 35 pixels. We call the rotate function like this:

1 $('#ad_1 > img').each(function(i,e){
2 rotate($(this),500,3000,i);
3 });

The whole script that we call will look like this:

01 $(function() {
02 $('#ad_1 > img').each(function(i,e){
03 rotate($(this),500,3000,i);
04 });
05 function rotate(elem1,speed,timeout,i){
06 elem1.animate({'marginLeft':'18px','width':'0px'},speed,function(){
07 var other;
08 if(elem1.parent().attr('id') == 'ad_1')
09 other = $('#ad_2').children('img').eq(i);
10 else
11 other = $('#ad_1').children('img').eq(i);
12 other.animate({'marginLeft':'0px','width':'35px'},
13 speed,function(){
14 var f = function() { rotate(other,speed,timeout,i) };
15 setTimeout(f,timeout);
16 });
17 });
18 }
19 });

So, the rotate function performs the hiding of the current element (that it was called upon) and then identifies which element it’s currently dealing with, so that another call of the rotate function can be performed on the other ad slices.
The two times mentioned in the rotate function stand for the speed of the rotation effect (speed) and the duration between the swapping of the ads (timeout) in milliseconds.

And that’s it!
I hope you like and enjoy it!

View demoDownload source

//
//

Advertisements
  1. April 23, 2010 at 11:05 pm

    Sorry for my bad english. Thank you so much for your good post. Your post helped me in my college assignment, If you can provide me more details please email me.

  2. April 28, 2010 at 10:52 pm

    Hey

    Really glad to get into this forum
    It’s what I am looking for.
    Hope to know more member here.

  3. May 11, 2010 at 6:19 am

    I agree with most of what is said here.

  4. May 31, 2010 at 3:26 pm

    Just saying Hi for now!

  5. June 30, 2010 at 11:19 pm

    In case you have at any time thought about constructing a Diy Solar Panel then make sure that you give this webpage a excellent examine.

  6. October 5, 2010 at 10:22 pm

    Looking to make extra money for your IT business? Try N-able service desk

  7. October 23, 2010 at 10:38 pm

    All the designs are as unmistakeable, as they are beautiful.All the designs are as functioning, as they are beautiful.All the designs are as noticeable, as they are beautiful.All the designs are as operational, as they are beautiful.

  8. November 14, 2010 at 3:10 pm

    Morning! i just discovered your website from Yahoo and happen to be reading some of your posts and just curious why you chose this platform for the site? Dont you find| it difficult to do almost everything with? Also is it a security concern? I have looked at setting it up myself but not so certain.
    I am a web designer myself so its interesting to checkout other platforms.

  9. January 18, 2011 at 8:39 am

    I really liked your article.Thanks Again. Awesome.

  10. January 18, 2011 at 7:42 pm

    Amazing, totally awesome. I am just getting into writing articles myself, nothing remotely close to your writing potential (ha!) but I’d love for you to take my stuff someday!

  11. January 21, 2011 at 9:51 pm

    What a world we stay in!!?! It just shows us all as much as the fools we are…

  12. January 22, 2011 at 12:02 am

    I don’t usually reply to posts but I will in this case. WoW

  13. January 22, 2011 at 4:06 am

    Hi there may I use some of the insight from this entry if I link back to you?

  14. January 22, 2011 at 1:52 pm

    Hello, I discovered your blog in a new directory of blogs. I dont know how your blog came up. Your weblog looks good. Have a good day.

  15. January 22, 2011 at 1:56 pm

    Excellent article and easy to understand explanation. How do I go about getting permission to post part of the article in my upcoming news letter? Giving proper credit to you the author and link to the site would not be a problem.

  16. developers
    March 22, 2012 at 7:03 am

    Hi
    We look for quality and not-expensive stock icons forWin 8 development.
    Anybody can advice something cool and real?

    Thanks in advance.

    • April 6, 2012 at 8:47 pm

      sorry dude but you can use icons from iconfinder.com and dryicons.com….

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: