Creating Fade Effect Animation Using JavaScript
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js?load=effects"></script>
Read Also: How to Create JavaScript Image Slideshow with Links
Now, use the following JavaScript functions to create the show or hide effect on the images of the slideshow. The function showEffect() will show the image in one second and the second function will hide the images in the same duration of time.
function ShowEffect(element){
new Effect.Appear(element,
{duration:1, from:0, to:1.0});
}
function FadeEffect(element){
new Effect.Fade(element,
{duration:1, from:1.0, to:0});
}
var path = new Array();
// LIST OF IMAGES
path[0] = "/image_1.gif";
path[1] = "/image_2.gif";
path[2] = "/image_3.gif";
Read Next: How to Detect Visitor’s Browser Using JavaScript?
Here I have placed full source code for creating an image slideshow with fade effect animation on the images. It may help you a lot. Just copy and paste the code below where you want to place slideshow and change the location of the images.
<script type="text/javascript">
function ShowEffect(element){
new Effect.Appear(element,
{duration:1, from:0, to:1.0});
}
function FadeEffect(element){
new Effect.Fade(element,
{duration:1, from:1.0, to:0});
}
var i = 0;
var path = new Array();
// LIST OF IMAGES
path[0] = "/image_1.gif";
path[1] = "/image_2.gif";
path[2] = "/image_3.gif";
function swapImage_0(){
document.slide.src = path[i];
if(i < path.length - 1) i++; else i = 0;
setTimeout("FadeEffect('hideshow')",4000);
setTimeout("ShowEffect('hideshow')",5000);
setTimeout("swapImage_0()",5000);
}
window.onload=swapImage_0;
</script>
<div id="hideshow">
<img height="200" name="slide" src="/image_1.gif" width="400" />
</div>
Preview:
See the Pen Creating a Fade Effect Animation using JavaScript by Shuseel Baral (@shuseel) on CodePen.
Read Next: Simple JavaScript Fade Effect Animations Using Jquery
Comments are closed.