Rotating Billboard System with jQuery and CSS3

billboardThis is a very old example, but I think it can often be overlooked for more complex solutions. The digital billboard is something we are all striving for in creating a website, but this example takes it to a literal conclusion.

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.

The billboard HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<div class="container">

    <div class="ad">

        <div id="ad_1" class="ad_1">

            <img class="slice_1" src="ads/ad1_slice01.jpg"/>

            <img class="slice_2" src="ads/ad1_slice02.jpg"/>

            <img class="slice_3" src="ads/ad1_slice03.jpg"/>

            <img class="slice_4" src="ads/ad1_slice04.jpg"/>

            <img class="slice_5" src="ads/ad1_slice05.jpg"/>

            <img class="slice_6" src="ads/ad1_slice06.jpg"/>

            <img class="slice_7" src="ads/ad1_slice07.jpg"/>

            <img class="slice_8" src="ads/ad1_slice08.jpg"/>

            <img class="slice_9" src="ads/ad1_slice09.jpg"/>

            <img class="slice_10" src="ads/ad1_slice10.jpg"/>

            <img class="slice_11" src="ads/ad1_slice11.jpg"/>

            <img class="slice_12" src="ads/ad1_slice12.jpg"/>

            <img class="slice_13" src="ads/ad1_slice13.jpg"/>

            <img class="slice_14" src="ads/ad1_slice14.jpg"/>

            <img class="slice_15" src="ads/ad1_slice15.jpg"/>

            <img class="slice_16" src="ads/ad1_slice16.jpg"/>

            <img class="slice_17" src="ads/ad1_slice17.jpg"/>

            <img class="slice_18" src="ads/ad1_slice18.jpg"/>

            <img class="slice_19" src="ads/ad1_slice19.jpg"/>

            <img class="slice_20" src="ads/ad1_slice20.jpg"/>

            <img class="slice_21" src="ads/ad1_slice21.jpg"/>

            <img class="slice_22" src="ads/ad1_slice22.jpg"/>

        </div>

        <div id="ad_2" class="ad_2">

            <img class="slice_1" src="ads/ad2_slice01.jpg"/>

            <img class="slice_2" src="ads/ad2_slice02.jpg"/>

            <img class="slice_3" src="ads/ad2_slice03.jpg"/>

            <img class="slice_4" src="ads/ad2_slice04.jpg"/>

            <img class="slice_5" src="ads/ad2_slice05.jpg"/>

            <img class="slice_6" src="ads/ad2_slice06.jpg"/>

            <img class="slice_7" src="ads/ad2_slice07.jpg"/>

            <img class="slice_8" src="ads/ad2_slice08.jpg"/>

            <img class="slice_9" src="ads/ad2_slice09.jpg"/>

            <img class="slice_10" src="ads/ad2_slice10.jpg"/>

            <img class="slice_11" src="ads/ad2_slice11.jpg"/>

            <img class="slice_12" src="ads/ad2_slice12.jpg"/>

            <img class="slice_13" src="ads/ad2_slice13.jpg"/>

            <img class="slice_14" src="ads/ad2_slice14.jpg"/>

            <img class="slice_15" src="ads/ad2_slice15.jpg"/>

            <img class="slice_16" src="ads/ad2_slice16.jpg"/>

            <img class="slice_17" src="ads/ad2_slice17.jpg"/>

            <img class="slice_18" src="ads/ad2_slice18.jpg"/>

            <img class="slice_19" src="ads/ad2_slice19.jpg"/>

            <img class="slice_20" src="ads/ad2_slice20.jpg"/>

            <img class="slice_21" src="ads/ad2_slice21.jpg"/>

            <img class="slice_22" src="ads/ad2_slice22.jpg"/>

        </div>

    </div>

</div>



<div class="billboard"></div>

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:

The CSS to center the slider in the billboard

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.billboard{

    position:absolute;

    bottom:0px;

    left:50%;

    margin-left:-447px;

    width:916px;

    height:599px;

    background:transparent url(../images/billboard.png) no-repeat 0px 0px;

}

The CSS for the container and images of the billboard

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
.container{

    position:absolute;

    bottom:0px;

    left:50%;

    margin-left:-447px;

    width:916px;

    height:599px;

}

.ad{

    width:800px;

    height:336px;

    position:relative;

    margin:35px 0px 0px 60px;

    background-color:#333;

}

.ad_1 img{

    width:35px;

    height:336px;

    position:absolute;    

}

.ad_2 img{

    width:0px;

    height:336px;

    margin-left:18px;

    position:absolute;

}

You can read the rest of the tutorial and get the source for free! This is another Mary Lou classic tutorial (even 4 years old).

Disclaimer: You will need javascript to make this execute properly.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(function() {            

    $('#ad_1 > img').each(function(i,e){

        rotate($(this),500,3000,i);

    });

    function rotate(elem1,speed,timeout,i){

        elem1.animate({'marginLeft':'18px','width':'0px'},speed,function(){

            var other;

            if(elem1.parent().attr('id') == 'ad_1')

                other = $('#ad_2').children('img').eq(i);

            else

                other = $('#ad_1').children('img').eq(i);

                other.animate({'marginLeft':'0px','width':'35px'},

                                  speed,function(){

                var f = function() { rotate(other,speed,timeout,i) };

                setTimeout(f,timeout);

            });

        });

    }

});

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.