Image Transition with Fading Effect using JavaScript


Image transition means changing the image and replacing one image with another. Users can see the image transition in the image slider.

While developing the image slider, we should focus on the animation for image transition to make an attractive UX of the application. In this tutorial, we will learn to add fading effect using various approaches to image transition.

Add class to the image to show an image with fading effect

We can use CSS to add fading effect to the image transition. The transition property of CSS allows us to add any transition to the image. So, we can add CSS to one class, and using JavaScript, we can add a class to the image, which will add a transition to the image

Syntax

Users can follow the syntax below to add a class to the image to show an image with fading effect.

document.getElementById("image").classList = 'class_name';

In the above syntax, we access the image using id and add the ‘class_name’ class to the class list of the image.

Example

In the example below, we have added an image to the webpage and given height and width to the image using some CSS. Also, we have added opacity with a 0 value in the img class.

Also, we have added ‘transition’ and ‘opacity’ properties to the animate class. Initially, the image doesn’t contain the ‘animate’ class. When users click the button, it executes the FadeIn() function adding the ‘animate’ class to the image.

In the output, we can observe that image fades in when we add the ‘animate’ class.

<html>
<head>
   <style>
      img {
         opacity: 0;
      }
      .animate {
         -webkit-transition: 2s;
         transition: 2s;
         opacity: 1;
      }
   </style>
</head>
<body>
   <h2> Using the <i> class </i> to add fadding effect in image transition </h2>
   <img id = "image" style = "width: 500px; height: 200px;" src = "https://www.tutorialspoint.com/static/images/logo-color.png" alt = "Logo Image"> <br>
   <button type = "button" onclick = "FadeIn()"> Fade In image </button>
   <script>
      function FadeIn() {
         document.getElementById("image").classList = 'animate';
      }
   </script>
</body>
</html>

Use the jQuery’s fadeIn() and fadeout() methods to add fading transition to images

The fadeout() method of JQuery allows us to remove the image from the web page with fading effect. The fadeIn() method allows us to add an image to the web page with fading effect.

Here, we will use the fadeout() and fadeIn() methods to add a proper fading effect to the image transition.

Syntax

Users can follow the syntax below to use the fadeout() and fadeIn() methods of JQuery to add fading effect to the image transition.

setInterval(fade, 3500);
function fade() {
   $("#slider img").eq(current).fadeOut(0);
   current = ++current % images.length;
   $("#slider img").eq(current).fadeIn(2000);
}

In the above syntax, the current variable keeps track of the image to show on the web page. We show the current image using the fadeIn() method and hide all other images.

Steps

Step 1 – Access all images using their class name.

Step 2 – Use the for-loop to iterate through all images and hide all images except the first image using the display property of the image.

Step 3 – Create a variable named ‘current’ and initialize it with zero.

Step 4 – Create a startImageTrans() function, and use the setInterval() method inside that to call the fade() function after every 3500 milliseconds. However, users can set the time interval according to their requirements

Step 5 – Inside the fade() function, use the eq() method of JQuery to access the current child. Hide the current image using the fadeout() method.

Step 6 – Increase the value of a current variable by 1, and if it becomes greater than the total number of images, set it to 0.

Step 7 – Use the fadeIn() method to show the current image.

Example

In the example below, we have created the HTML div element and added five different images. We have implemented the above algorithm in JavaScript to all images one by one with fading transition effect.

<html>
<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
   <style>
      img {
         height: 200px;
         width: 500px;
      }
   </style>
</head>
<body>
   <h3> Using the <i> jQuery fadeIn() method </i> to add fadding effect in image transition </h3>
   <div id="slider">
      <img src = "https://www.tutorialspoint.com/static/images/logocolor.png" class = "sliderImage" alt = "Image 1">
      <img src ="https://www.tutorialspoint.com/images/trending_categories.svg" class = "sliderImage" alt = "Image 2">
      <img src = "https://www.tutorialspoint.com/images/Data-Structure.png" class = "sliderImage" alt = "Image 3">
      <img src = "https://www.tutorialspoint.com/images/Javascript.png" class = "sliderImage" alt = "Image 4">
   </div>
   <br> <br>
   <button type = "button" onclick = "startImageTrans()"> Start Image Transitions </button>
   <script>
      let images = document.querySelectorAll('.sliderImage');
      for (let i = 0; i < images.length; i++) {
         if (i != 0)
         images[i].style.display = "none";
      }
      var current = 0;
      function startImageTrans() {
         setInterval(fade, 3500);
      }
      function fade() {
         
         // hide the previous image with fading effect
         $("#slider img").eq(current).fadeOut(0);
         current++;
         current = current % images.length;
         
         // show a current image with fading effect
         $("#slider img").eq(current).fadeIn(2000);
      }
   </script>
</body>
</html>

Use the CSS transition properties to add fading effect to the image transition

In this approach, we will set the background image for the HTML element. Also, we will add a fading transition for the background of the HTML element. So, whenever we change the background, it appears with fading effect.

Syntax

Users can follow the syntax below to use CSS transition properties to add fading effect to the background image.

<style>
#background-div {
   background-image: url("image_URL");
   transition: background 2s linear;
}
</style>
function FadeImage() {
   imageDiv.style.backgroundImage = `url(${allImages[current]})`;
}

We added a background image to the element using CSS in the above syntax and ‘transition’ to the background. Whenever we change the background image using JavaScript, it automatically applies the fading transition to the image.

Example

In the example below, the div element contains the initial background image. We have created the images array containing the URLs of different background images. We used the setInterval() method to invoke the fadeInImage() function after every 3000 milliseconds.

In the fadeInImage() function, we change the background image repeatedly, and fading transition applies using CSS when the image changes.

<html>
<head>
   <style>
      #background-div {
         background-position: center;
         background-size: cover;
         background-image:
         url("https://www.tutorialspoint.com/images/trending_categories.svg");
         display: flex;
         height: 300px;
         width: 600px;
         transition: background 2s linear;
      }
   </style>
</head>
<body>
   <h3>Using the <i> CSS transition </i> to add fadding effect in image transition</h3>
   <div id = "background-div"></div>
   <script>
      let allImages = [
         "https://www.tutorialspoint.com/images/trending_categories.svg",
         "https://www.tutorialspoint.com/javascript/images/javascript-minilogo.jpg",
         "https://www.tutorialspoint.com/css/images/css-mini-logo.jpg",
      ]
      const imageDiv = document.getElementById("background-div");
      setInterval(FadeImage, 3000);
      let current = 0;
      function FadeImage() {
         current++;
         if (current >= allImages.length) current = 0;
         imageDiv.style.backgroundImage = `url(${allImages[current]})`;
      }
   </script>
</body>
</html>

We learned three approaches to add fading effect to the image transition. We used JQuery’s fadeIn() and fadeout() methods in the second approach and CSS’s ‘transition’ properties in the first and third approaches.

Updated on: 28-Feb-2023

4K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements