search

Home >Web Front-end >JS Tutorial >Implement image transitions with fade effects using JavaScript

Implement image transitions with fade effects using JavaScript

WBOY
WBOYforward
2023-08-24 16:21:041315browse

使用 JavaScript 实现具有淡入淡出效果的图像过渡

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

While developing an image slider, we should focus on the animation of the image transition to make the application have an attractive user experience. In this tutorial, we'll learn to add a fade effect using various image transition methods.

Add class to image to display image with fade effect

We can add fade effects to image transitions using CSS. The transition property of CSS allows us to add any transition to an image. So, we can add CSS to a class, and using JavaScript, we can add a class to the image, which will add a transition to the image

grammar

Users can follow the syntax below to add a class to an image to display an image with a fade 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 image's class list.

Example

In the example below, we add an image to a web page and use some CSS to give it a height and width. Additionally, we added an opacity value of 0 in the img class.

Additionally, we added the "transition" and "opacity" properties to the animation class. Initially, the image does not contain the "animate" class. When the user clicks the button, it executes the FadeIn() function, adding the "animate" class to the image.

In the output, we can observe that the 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 jQuery's fadeIn() and fadeout() methods to add fade transitions to images

JQuery’s fadeout() method allows us to remove images from web pages with a fade-in and fade-out effect. The fadeIn() method allows us to add an image with a fade effect to the web page.

Here we will use the fadeout() and fadeIn() methods to add appropriate fade effects to image transitions.

grammar

Users can use JQuery's fadeout() and fadeIn() methods according to the following syntax to add fade effects to image transitions. 

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 tracks the image to be displayed on the web page. We use the fadeIn() method to show the current image and hide all other images.

step

Step 1 – Access all images using their class name.

Step 2 – Use a for loop to iterate through all images and hide all but the first image using the image’s display property.

Step 3 – Create a variable called “current” and initialize it to zero.

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

Step 5 – Within the fade() function, use JQuery’s eq() method to access the current child. Use the fadeout() method to hide the current image.

Step 6 – Increase the value of the current variable by 1 or set it to 0 if it is greater than the total number of images.

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

Example

In the example below, we create an HTML div element and add five different images. We implemented the above algorithm in JavaScript for all images one by one, with a fade 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 CSS transition properties to add fade effects to image transitions

In this method we will set the background image for the HTML element. Additionally, we will add a fade transition to the background of the HTML element. So, whenever we change the background, it will fade in and out.

grammar

Users can use the CSS transition property to add a fade effect to the background image according to the following syntax. 

<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 and "transitioned" to the background using CSS in the above syntax. Whenever we change the background image using JavaScript, it automatically applies the fade transition to the image.

Example

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

In the fadeInImage() function, we repeatedly change the background image, and when the image changes, a fade transition is made using CSS. 

<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 ways to add a fade effect to an image transition. We used JQuery's fadeIn() and fadeout() methods in the second method, and the CSS "transition" property in the first and third methods.

The above is the detailed content of Implement image transitions with fade effects using JavaScript. For more information, please follow other related articles on the PHP Chinese website!

JavaScript jquery css html for 循环 display transition 算法
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to check if a value is object-like in JavaScript?Next article：How to check if a value is object-like in JavaScript?

Related articles

See more