The Markup

Well use an unordered list for the slideshow and well add a span for each image and a
division with a heading:
1
2
3
4
5
6
7
8
9
10
<ul class="cb-slideshow">
<li>
<span>Image 01</span>
<div>
<h3>relaxation</h3>
</div>
</li>
<li><!--...--></li>
<li><!--...--></li>
</ul>
The spans are going to be the elements that will have the background images of the
slideshow.
The CSS
Lets style the unordered list first. It will be fixed and we will stretch it over the
viewport. Well also use a :after pseudo-element in order to place a pattern on top of the
image:
1
2
3
4
5
6
7
8
9
10
11
12
13
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.cb-slideshow:after {
content: '';
background: transparent url(../images/pattern.png) repeat top
left;
}
Well use a repeated dot pattern but you could as well use, for example, a css gradient
with some transparency.
The span that will contain a slideshow image will be positioned absolutely and have a
width and height of 100%. Since we have some text inside, well make the color
transparent because we dont want to see it. The background-size property value
cover will make sure that the background image covers all the area of the element and
hence it is the size of the screen, it will cover all the visible viewport. The opacity is set
to 0. Well then change that in our animation:
1
.cb-slideshow li span {
2
3
4
5
6
7
8
9
10
11
12
13
14
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
animation: imageAnimation 36s linear infinite 0s;
}
The animation for each span will last 36 seconds and run an inifinite number of times.
But lets look at the details in a while, first, we will style the division with the headline:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
color: #fff;
animation: titleAnimation 36s linear infinite 0s;
}
.cb-slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-
serif;
font-size: 240px;
padding: 0;
line-height: 200px;
}
The animation for the title division will also take 36 seconds.
Now, we will define the background images for all the spans and the animation delay,
so that each following slideshow image and title appear after 6 second of the previous
one:
1
2
3
4
5
6
7
8
9
.cb-slideshow li:nth-child(1) span {
background-image: url(../images/1.jpg)
}
.cb-slideshow li:nth-child(2) span {
background-image: url(../images/2.jpg);
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(../images/3.jpg);
animation-delay: 12s;
}
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
.cb-slideshow li:nth-child(4) span {
background-image: url(../images/4.jpg);
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(../images/5.jpg);
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(../images/6.jpg);
animation-delay: 30s;
}

.cb-slideshow li:nth-child(2) div {
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) div {
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) div {
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) div {
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) div {
animation-delay: 30s;
}
Now, lets have a look at the slideshow animation. Each span will have an animation
time of 36 seconds. In those 36 seconds we will change the opacity from 0 to 1 when
the animation reaches 8%. And then this opacity gets kept until 17% are reached. When
reaching 25% the opacity should already be 0 again and stay like that until the end.
Now, why those values? We want each image to be visible for 6 seconds and we know
that at the end of a cycle, we want the first image to show again. We have 6 images, so
we will need 36 seconds for a whole cycle to finish. Now, we need to time the opacity
values accordingly. Knowing that our second image will start animating at 6 seconds,
we need to know at what percentile of the animation this will require the first image to
fade out. Dividing 6 by 36 gives us 0.166 which would be 16% for our keyframe step.
Now, because we dont want our image to just fade all the time, well define an
inbetween step, which well set at half of what we calculated, i.e. 8%. Thats the point
that we want to show the image completely and we only want to start fading it out at
17%, making it disappear completely at 25%.
1
2
3
@keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; }
8% { opacity: 1; animation-timing-function: ease-out; }
17% { opacity: 1 }
4
5
6
7
25% { opacity: 0 }
100% { opacity: 0 }
}
We have the same reasoning for the title, just that we want it to disappear a bit quicker,
hence the opacity 0 at 19%:
1
2
3
4
5
6
7
@keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
For browsers that dont support animations, well simply show the last slideshow image
by setting the opacity of the span to 1:
1
2
3
.no-cssanimations .cb-slideshow li span{
opacity: 1;
}
The no-cssanimations class is added by Modernizr.
Lets as well take care of the titles font size when the viewport is smaller. Well use
media queries in order to set the font size smaller at specific widths:
1
2
3
4
5
6
@media screen and (max-width: 1140px) {
.cb-slideshow li div h3 { font-size: 140px }
}
@media screen and (max-width: 600px) {
.cb-slideshow li div h3 { font-size: 80px }
}
And thats all for the simple version of the slideshow! Now, lets see how we can spice
up the transitions a bit.
Alternative animation example
Now, we can play a bit with the animations for showing the images and their titles.
The following animation will make the image scale up a bit and rotate it slightly:
1
2
3
4
5
6
@keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
7
8
9
10
11
12
13
14
15
16
17
18
19
20
transform: scale(1.05);
animation-timing-function: ease-out;
}
17% {
opacity: 1;
transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
The title will slide in from the right (well have to change the text-align for the title
division to right), and disappear by sliding to the left and fading out:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@keyframes titleAnimation {
0% {
opacity: 0;
transform: translateX(200px);
}
8% {
opacity: 1;
transform: translateX(0px);
}
17% {
opacity: 1;
transform: translateX(0px);
}
19% {
opacity: 0;
transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
There are many possibilities for the image and title transitions, just experiment!