Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>
Idioma: En

Cycling Slider with CSS3

AZ is a highly reputable developer / designer for a user’s front end experience. I’ve enjoyed several of his tutorials, but this one in particular lays out how to do a vertical scrolling experience using only CSS3 for the transitions. I believe this was also featured on smashing magazine back in 2012. The technique isn’t new, but the functionality often gets overlooked for a more traditional horizontal slider.

Related Articles

In the last tutorial I had a great line at the bottom that I am going to steal for this post as well. The accordion slider here won’t be useful on most websites. You’ll need a specific purpose such as displaying a set of equal level products or setting up a comparison of products. If you end up using it, please leave a comment with a link. I’d love to check it out!

HTML Markup

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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<div class="container">




    <div id="content-slider">


    <div id="slider">


    <div id="mask">


<ul>


    <li id="first" class="firstanimation">


<a href="#">


<img src="images/img_1.jpg" alt="Cougar"/>


</a>


<div class="tooltip">


<h1>Cougar</h1>


</div>


</li>






<li id="second" class="secondanimation">


<a href="#">


<img src="images/img_2.jpg" alt="Lions"/>


</a>


<div class="tooltip">


<h1>Lions</h1>


</div>


</li>






<li id="third" class="thirdanimation">


<a href="#">


<img src="images/img_3.jpg" alt="Snowalker"/>


</a>


<div class="tooltip">


<h1>Snowalker</h1>


</div>


</li>






<li id="fourth" class="fourthanimation">


<a href="#">


<img src="images/img_4.jpg" alt="Howling"/>


</a>


<div class="tooltip">


<h1>Howling</h1>


</div>


</li>






<li id="fifth" class="fifthanimation">


<a href="#">


<img src="images/img_5.jpg" alt="Sunbathing"/>


</a>


<div class="tooltip">


<h1>Sunbathing</h1>


</div>


</li>


</ul>


</div>


<div class="progress-bar"></div>


</div>


</div>


</div>

The HTML is a little intense for someone just starting out, but utilizing basic tags and leveraging nested classes and ids we can create a nice slider in a simple format. The next step is adding a style to our wonderful html framework.

CSS 3 Styling

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
108
109
110
111
112
113
@import url("reset.css") screen;
@import url("animation.css") screen;

/* Common */
html, body {
    background:#eaeaea url(../img/bg.png) repeat;
    font-size:12px;
    font-family:"Open Sans", serif;
    min-width:960px;
    margin:0;
    padding:0;
    color:#aaa;
}

.content h1 {
    font-size:48px;
    color:#000;
    text-shadow:0px 1px 1px #f4f4f4;
    text-align:center;
    padding:60px 0 30px;   
}

/* LAYOUT */
.container {
    margin:0 auto;
    overflow:hidden;
    width:960px;
}

/* CONTENT SLIDER */
#content-slider {
    width:100%;
    height:360px;
    margin:10px auto 0;
}
/* SLIDER */
#slider {
    background:#000;
    border:5px solid #eaeaea;
    box-shadow:1px 1px 5px rgba(0,0,0,0.7);
    height:320px;
    width:680px;
    margin:40px auto 0;
    overflow:visible;
    position:relative;
}
#mask {
    overflow:hidden;
    height:320px;
}
#slider ul {
    margin:0;
    padding:0;
    position:relative;
}
#slider li {
    width:680px;
    height:320px;
    position:absolute;
    top:-325px;
    list-style:none;
}

#slider li.firstanimation {
    -moz-animation:cycle 25s linear infinite;  
    -webkit-animation:cycle 25s linear infinite;       
}
#slider li.secondanimation {
    -moz-animation:cycletwo 25s linear infinite;
    -webkit-animation:cycletwo 25s linear infinite;    
}
#slider li.thirdanimation {
    -moz-animation:cyclethree 25s linear infinite;
    -webkit-animation:cyclethree 25s linear infinite;      
}
#slider li.fourthanimation {
    -moz-animation:cyclefour 25s linear infinite;
    -webkit-animation:cyclefour 25s linear infinite;       
}
#slider li.fifthanimation {
    -moz-animation:cyclefive 25s linear infinite;
    -webkit-animation:cyclefive 25s linear infinite;       
}

#slider .tooltip {
    background:rgba(0,0,0,0.7);
    width:300px;
    height:60px;
    position:relative;
    bottom:75px;
    left:-320px;
    -moz-transition:all 0.3s ease-in-out;
    -webkit-transition:all 0.3s ease-in-out;  
}
#slider .tooltip h1 {
    color:#fff;
    font-size:24px;
    font-weight:300;
    line-height:60px;
    padding:0 0 0 20px;
}
#slider li#first:hover .tooltip,
#slider li#second:hover .tooltip,
#slider li#third:hover .tooltip,
#slider li#fourth:hover .tooltip,
#slider li#fifth:hover .tooltip {
    left:0px;
}
#slider:hover li,
#slider:hover .progress-bar {
    -moz-animation-play-state:paused;
    -webkit-animation-play-state:paused;
}

By now, I think you’ll be able to figure out how the slider is working, but if you are feeling a little lost do a crtl + f (find) and look for where the code has ‘paused’ and ‘cycle’ is used. Remember animation is action, but not necessarily movement. :)

1
2
3
-moz-animation:cycle 25s linear infinite;  

-webkit-animation-play-state:paused;

One thing that will drive me crazy when going to a website is to have no idea when or if the image will change. Including a progress bar is common courtesy and can be achieved in a fairly simple fashion. The code for it is below.

Our Progress Bar

1
2
3
4
5
6
7
8
9
10
/* PROGRESS BAR */
.progress-bar {
    position:relative;
    top:-5px;
    width:680px;
    height:5px;
    background:#000;
    -moz-animation:fullexpand 25s ease-out infinite;
    -webkit-animation:fullexpand 25s ease-out infinite;
}

Hopefully you feel like you’ve learned a little bit here. I know the slider in a word can be extremely intimidating, but after this tutorial you should have a much better understanding of how animation works with moz and webkit, as well as different control mechanism / states you can utilize like paused.



This post first appeared on CSS3.com - A Comprehensive CSS 3 Reference Guide,, please read the originial post: here

Share the post

Cycling Slider with CSS3

×

Subscribe to Css3.com - A Comprehensive Css 3 Reference Guide,

Get updates delivered right to your inbox!

Thank you for your subscription

×