How To Create A Fade Effect Animation Using JavaScript?

Nowadays most of the websites or blogs are using image slideshows or animations on their pages using JavaScript codes. Such image animations make websites being more attractive and smart. In this article, you will get step by step guide for creating image slideshow with fade effect animation on images using JavaScript. You can use these codes on your website or blog to create attractive slideshows along with the animations on images.

Creating Fade Effect Animation Using JavaScript

For creating this image slideshow, we have used two external JavaScript libraries. So you may have to place the following JavaScript codes on the header part of the webpage if it was not working while placing on the location of the slideshow.

<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>

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});
   }

Finally, you have to list the images on the array and use the function in order to swap the images on a slideshow. You can create an array of images as given below. Here you have to replace the path of your images that you want to use. You can add more images to your requirements.

var path = new Array();
// LIST OF IMAGES
path[0] = "/image_1.gif";
path[1] = "/image_2.gif";
path[2] = "/image_3.gif";

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:

Following is the preview of the image slideshow created with JavaScript applying animation effect on the images of the slideshow.

See the Pen Creating a Fade Effect Animation using JavaScript by Shuseel Baral (@shuseel) on CodePen.

Please follow and like us: