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.
@-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;}
var i = 0;
var path = new Array();
// LIST OF IMAGES
path[0] = “https://www.siteforinfotech.com/wp-content/uploads/2014/11/image1.jpg”;
path[1] = “https://3.bp.blogspot.com/–UBsuaVDrLM/VGMQO4DJD9I/AAAAAAAAAlk/uvOoQv40MhM/s1600/image2.jpg”;
path[2] = “https://1.bp.blogspot.com/-x9ngyMlv5HU/VGMQPAA_gFI/AAAAAAAAAlo/Vvabz0PBmCE/s1600/image3.jpg”;
function swapImage1()
{
document.slide.src = path[i];
if(i < path.length - 1) i++; else i = 0;
setTimeout("swapImage1()",5000);
}
window.onload=swapImage1;
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] = "https://www.siteforinfotech.com/";
link[1] = "https://www.siteforinfotech.com/p/tutorial.html";
link[2] = "https://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
1 Comment
Pingback: How to Add Multiple Slideshows on One Page Using Javascript | InfoTechSite