You can give fade effect animation for image slideshow using CSS. @keyframes 'at' rule and animation keyword in CSS can be used to make image slideshow with fade effect. With @keyframes 'at' rule, you can define the properties that will be animated in an animation rule and animation keyword to set all of the animation properties.
Here I have used different types of animation properties like animation-name, animation-duration, animation-timing-function and animation-iteration-count. Where animation-name specifies name of the animation, animation-duration specifies animation duration in second(s) or milisecond(ms), animation-timing-function specifies how the animation will play like ease, ease-in, ease-in-out, ease-out and linear and animation-iteration-count:number of times animation should play.
Simple fade effect image slideshow
Here is a sample CSS code for creating simple fade effect image slideshow written for safari browser.
<style type="text/css">
@-webkit-keyframes fade{
from {opacity:.5;}
50% {opacity:1;}
to {opacity:.5;}
}
#anim1 {-webkit-animation-name:fade;-webkit-animation-duration:5s;
-webkit-animation-iteration-timing-function:linear;
position:relative;-webkit-animation-iteration-count:infinite;}
</style>
Here is a full HTML code along with required JavaScript code for creating simple fade effect image slideshow.
<head>
<title>CSS Animations</title>
<style type="text/css">
@-webkit-keyframes fade{
from {opacity:.5;}
50% {opacity:1;}
to {opacity:.5;}
}
@-moz-keyframes fade{
from {opacity:.5;}
50% {opacity:1;}
to {opacity:.5;}
}
@-o-keyframes fade{
from {opacity:.5;}
50% {opacity:1;}
to {opacity:.5;}
}
@-ms-keyframes fade{
from {opacity:.5;}
50% {opacity:1;}
to {opacity:.5;}
}
#anim1 {-webkit-animation-name:fade;-webkit-animation-duration:5s;
-webkit-animation-iteration-timing-function:linear;position:relative;
-webkit-animation-iteration-count:infinite;-moz-animation-name:fade;
-moz-animation-duration:5s;-moz-animation-iteration-timing-function:linear;
-moz-animation-iteration-count:infinite;-o-animation-name:fade;
-o-animation-duration:5s;-o-animation-iteration-timing-function:linear;
-o-animation-iteration-count:infinite;-ms-animation-name:fade;
-ms-animation-duration:5s;-ms-animation-iteration-timing-function:linear;
-ms-animation-iteration-count:infinite;}
</style>
<script language="JavaScript">
var i = 0;
var path = new Array();
// LIST OF IMAGES
path[0] = "image1.jpg";
path[1] = "image2.jpg";
path[2] = "image3.jpg";
function swapImage1()
{
document.slide.src = path[i];
if(i < path.length - 1) i++; else i = 0;
setTimeout("swapImage1()",5000);
}
window.onload=swapImage1;
</script>
</head>
<body>
<div id="anim1"><img height="400" name="slide" src="image_1.gif" width="600" />
</div>
</body>
</html>
In the above code prefixes -webkit-, -moz-, -o-, -ms- are used for browsers safari, firefox, opera and internet explorer respectively.
Here is a preview of image slideshow for the code above.
Fade effect image slideshow with caption
You can add caption for this slideshow by adding following JavaScript codes within <script> tag.
// LIST OF CAPTİONS
caption[0] = "Caption for the first image";
caption[1] = "Caption for the second image";
caption[2] = "Caption for the third image";
function swapImage(){
var el = document.getElementById("mydiv");
el.innerHTML=caption[i];
var img= document.getElementById("anim1");
img.src= image[i];
if(i <k ) { i++;}
else { i = 0; }
For details on adding caption on image slideshow visit the post: How To Create Simple Image Slideshow Using JavaScript ?
Fade effect image slideshow with caption and link
You can add caption for this slideshow by adding following JavaScript codes within <script> tag.
var link= new Array();
link[0] = "http://www.siteforinfotech.com/";
link[1] = "http://www.siteforinfotech.com/p/tutorial.html";
link[2] = "http://www.siteforinfotech.com/p/mcqs.html";
function swapImage(){
var el = document.getElementById("mydiv");
el.innerHTML=caption[i];
var img= document.getElementById("anim1");
img.src= image[i];
var a = document.getElementById("link");
a.href= link[i];
if(i <k ) { i++;}
else { i = 0; }
For details on adding caption and link on image slideshow visit the post: How to Create JavaScript Image Slideshow with Links
Related Posts:
- How To Create Simple Image Slideshow Using JavaScript ?
- How to Create Simple JavaScript Fade Effect Animation?
- Image Slideshow with Navigation Buttons Using JavaScript
- How to Create JavaScript Image Slideshow with LInks
- Simple JavaScript Fade Effect Animation Using Jquery
0 Response to "How to create fade effect image slideshow using CSS"
Post a Comment