Hello, readers . In today's Blog I have created An Animated Slideshow using CSS3. Basically a Slideshow is comprises of various slides which keeps on rotating and display images one at a time .
So here in my blog I have tried to create a slideshow without javascript.
In my example, I have used number of images creating an unodered list inside a div .
With the help of CSS3 @keyframe and animation property, I have tried to create it.Below is the html code for the example :-
<!DOCTYPE html>
<html>
<head>
<title>Slideshow Using CSS</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
<h1>Pure CSS Slider</h1>
<ul class="slider">
<li><a href="#">
<img src="images/img01.png" alt="img-01">
</a>
</li>
<li><a href="#">
<img src="images/img02.png" alt="img-02">
</a>
</li>
<li><a href="#">
<img src="images/img03.png" alt="img-03">
</a>
</li>
<li><a href="#">
<img src="images/img04.png" alt="img-04">
</a>
</li>
<li><a href="#">
<img src="images/img05.png" alt="img-05">
</a>
</li>
</ul>
<p>Mouse over the slide to stop the animation.</p>
</div>
</body>
</html>
In the CSS , To the slider class as well as to its li I have set the height and width and display as inline -block .
I have set the @keyframe property to the slider class at various percentages by setting its margin-left property at various intervals.
Now to the first-child of the <li> I have used slider animation, time duration for 20s for infinite iteration time.
We can also pause the animation for this I have applied animation-play-state to pause at hover effect over the slides.
Below is the CSS code for the example:-
body {
font: normal 14px Helvetica Neue, Arial, sans-serif;
background: #fafafa;
}
h1 {
font-weight: 200;
font-size: 36px;
text-align: center;
color: #333;
}
p {
color: #aaa;
text-align: right;
}
.container {
width: 800px;
margin: auto;
}
/* Slider */
.slider,
.slider li {
width: 800px;
height: 300px;
}
.slider {
overflow: hidden;
list-style: none;
padding: 0;
margin: 0;
white-space: nowrap;
border-radius: 3px;
word-spacing: -2px; /* removing inline elements spacing */
letter-spacing: -2px;
}
.slider li {
display: inline-block;
word-spacing: normal; /* inline elements spacing */
letter-spacing: normal;
}
@keyframes slider {
0%, 18% {margin-left: 0;}
20%, 38% {margin-left: -100%;}
40%, 58% {margin-left: -200%;}
60%, 78% {margin-left: -300%;}
80%, 99.9% {margin-left: -400%;}
100% {margin-left: 0;}
}
@-webkit-keyframes slider {
0%, 18% {margin-left: 0;}
20%, 38% {margin-left: -100%;}
40%, 58% {margin-left: -200%;}
60%, 78% {margin-left: -300%;}
80%, 99.9% {margin-left: -400%;}
100% {margin-left: 0;}
}
.slider li:first-child {
animation: slider 20s ease-out infinite;
-webkit-animation: slider 20s ease-out infinite;
}
/* pause animation on mouse over */
.slider:hover li:first-child {
animation-play-state:paused;
-webkit-animation-play-state: paused;
}
Conclusion :-
Hence, An animated Slideshow has been created using CSS3 properties which is easy to understand and create.
Note:-The above code will run over all modern browsers such as on Firefox 7.0.1, Chrome 15.0, Internet Explorer 9.0 , Safari 5.1.1.
0 Comment(s)