Css - How do I add a fade transition into js code?

emiliano85
August 9, 2023
207 views
0 votes
2 Answers

I’m trying to get the background image of a certain div, to change/cycle through an array of images using the following code.

It works as supposed, only thing is i have no idea how to implement a fade in/fade out transition effect when it comes to js. Tried in CSS, but it only affects the very first load of the first image, when the whole page is loaded.

Could you please help me implement a fade transition between images?

  function displayNextImage() {
      x = (x === images.length - 1) ? 0 : x + 1;
      document.getElementById("slider-background").src = images[x];
  }
  function changeImage() {
      setInterval(displayNextImage, 5000);
  }

  var images = [], x = -1;
  images[0] = "https://www.example.com/1.jpg";
  images[1] = "https://www.example.com/2.jpg";
  images[2] = "https://www.example.com/3.jpg";

Tags: css javascript

Answers

Okay so first you’ll need to update your css with this id:

#slider-background {
  transition: opacity 1s ease-in-out;
  opacity: 1;
}

Next, you’ll need to add quite some stuff in ur javascript file. I commented everything so I hope it’s understandable.

function displayNextImage() {
  var element = document.getElementById("slider-background");
  // Fade out the current image
  element.style.opacity = 0;
  // Wait for the fade out transition, then change the image and fade it back in
  setTimeout(function() {
    x = (x === images.length - 1) ? 0 : x + 1;
    element.style.backgroundImage = "url('" + images[x] + "')";
    element.style.opacity = 1;
  }, 1000); // This duration should match the transition duration in your CSS
}

function changeImage() {
  setInterval(displayNextImage, 5000); // Change this time to control the speed of the slide
}

var images = [], x = -1;
images[0] = "https://www.example.com/1.jpg";
images[1] = "https://www.example.com/2.jpg";
images[2] = "https://www.example.com/3.jpg";

// Don't forget to call the changeImage function somewhere to start the slideshow
changeImage();

The code makes a picture slowly vanish, then waits a bit, switches to a new picture, and makes that picture slowly appear. It makes sure the timing matches up so it looks smooth.

Other solution (include using opacity and preloading images):

let images = [], x = 0;
images[0] = "https://via.placeholder.com/100/FF0000/FFFFFF/?text=Image_1:.*";
images[1] = "https://via.placeholder.com/100/0000FF/FFFFFF/?text=Image_2:.*";
images[2] = "https://via.placeholder.com/100/00FF00/000000/?text=Image_3:.*";
    
function displayNextImage() {
    const image = document.getElementById("slider-background");
    x = (x === images.length - 1) ? 0 : x + 1;
    
    if (!image.classList.contains('show') || !image.classList.contains('showhide')) {
        image.classList.add('hide');
    }
    
    image.classList.replace('show', 'hide');
    setTimeout(() => {
        image.src = images[x];
        setTimeout(() => {
            image.classList.replace('hide', 'show');
        }, 400);
    }, 400);
}
    
function changeImage() {
    setInterval(displayNextImage, 5000);
}
    
changeImage();

.show {
    transition: opacity 400ms;
    opacity: 1;
}
.hide {
    opacity: 0;
    transition: opacity 400ms;
}

<link rel="preload" as="image" href="https://via.placeholder.com/100/FF0000/FFFFFF/?text=Image_1:.*">
<link rel="preload" as="image" href="https://via.placeholder.com/100/0000FF/FFFFFF/?text=Image_2:.*">
<link rel="preload" as="image" href="https://via.placeholder.com/100/00FF00/000000/?text=Image_3:.*">
    
<img src="https://via.placeholder.com/100/FF0000/FFFFFF/?text=Image_1:.*" alt="" id="slider-background" />

Please signup or login to give your own answer.

Click here to cancel reply.

Css – How do I add a fade transition into js code?

Answers