Creating a dynamic effect with JavaScript: Transitioning background images with a fading effect

Question

Creating a dynamic effect with JavaScript: Transitioning background images with a fading effect

I need help smoothing out the transition between three images that my divs switch between in a web animation. How can I implement a fade effect right before the switch happens?

<div class="my-images">
   <div id="image-1"></div>
   <div id="image-2"></div>
</div>


<script>
  function displayNextImage() {
     x = (x === images.length - 1) ? 0 : x + 1;
     document.getElementById("image-1").style.backgroundImage = images[x];
     document.getElementById("image-2").style.backgroundImage = images[x];
  }

  function startTimer() {
     setInterval(displayNextImage, 10000);
  }

  var images = [],
  x = 0;
  images[0] = "url('images/snow.jpeg')";
  images[1] = "url('images/nike.jpeg')";
  images[2] = "url('images/motor.jpeg')";
</script>

It's important to note that this animation loops continuously, so the fading effect should not be visible only on the initial load.

javascript

Answer 1

Answer №1

It is important to consider cross-browser compatibility when working without JQuery. Using JQuery can help you avoid these issues and achieve your desired results.

<div class="my-images">
   <div class="my-image" id="image-1"></div>
   <div class="my-image" id="image-2"></div>
</div>


<script>
  function displayNextImage() {
    $("#image-" + x).css('backgroundImage',  images[x]).show('slow');
    x++;
  }

  var images = [],
  x = 0;
  images[0] = "url('images/snow.jpeg')";
  images[1] = "url('images/nike.jpeg')";
  images[2] = "url('images/motor.jpeg')";
</script>

To ensure proper styling, make sure to add the following CSS:

.my-image{
  display:none;
}

If you do not use display: block, modify your CSS as follows:

.my-image{
  display:whatYouWant;
}

Don't forget to include the document ready() function and change show() to fadeIn():

$(document).ready(function(){
    $(".my-image").hide();
  });

  function displayNextImage() {
    $("#image-" + x).css('backgroundImage',  images[x]).fadeIn('slow');
    x++;
  }

This modification using fadeIn() will retain the previous value for a smoother transition.

If you want the div to be visible before adding an image, adjust the displayNextImage() function accordingly:

function displayNextImage() {
  $("#image-" + x).hide().css('backgroundImage',  images[x]).fadeIn('slow');
  x++;
}

Answer 2

It is important to consider cross-browser compatibility when working without JQuery. Using JQuery can help you avoid these issues and achieve your desired results.

<div class="my-images">
   <div class="my-image" id="image-1"></div>
   <div class="my-image" id="image-2"></div>
</div>


<script>
  function displayNextImage() {
    $("#image-" + x).css('backgroundImage',  images[x]).show('slow');
    x++;
  }

  var images = [],
  x = 0;
  images[0] = "url('images/snow.jpeg')";
  images[1] = "url('images/nike.jpeg')";
  images[2] = "url('images/motor.jpeg')";
</script>

To ensure proper styling, make sure to add the following CSS:

.my-image{
  display:none;
}

If you do not use display: block, modify your CSS as follows:

.my-image{
  display:whatYouWant;
}

Don't forget to include the document ready() function and change show() to fadeIn():

$(document).ready(function(){
    $(".my-image").hide();
  });

  function displayNextImage() {
    $("#image-" + x).css('backgroundImage',  images[x]).fadeIn('slow');
    x++;
  }

This modification using fadeIn() will retain the previous value for a smoother transition.

If you want the div to be visible before adding an image, adjust the displayNextImage() function accordingly:

function displayNextImage() {
  $("#image-" + x).hide().css('backgroundImage',  images[x]).fadeIn('slow');
  x++;
}

Answer 3

Answer №2

If you want to achieve this with CSS animation, follow these steps for each cycle:

1) Change the image sources as you are currently doing

2) Restart the fade-in animation, read more here

3) Increment the index value

const images = [
  'https://source.unsplash.com/iMdsjoiftZo/100x100',
  'https://source.unsplash.com/ifhgv-c6QiY/100x100',
  'https://source.unsplash.com/w5e288LU8SU/100x100'
];

let currentIndex = 0;

const oldPic1 = document.getElementById('oldImage1');
const newPic1 = document.getElementById('newImage1');
const oldPic2 = document.getElementById('oldImage2');
const newPic2 = document.getElementById('newImage2');

window.setInterval(() => {
  // Replace new image with the old one
  oldPic1.src = newPic1.src;
  oldPic2.src = newPic2.src;
  
  // Set a new image
  newPic1.src = images[currentIndex];
  newPic2.src = images[currentIndex];
  
  // Reset the animation
  newPic1.style.animation = 'none';
  newPic1.offsetHeight; /* trigger reflow */
  newPic1.style.animation = null; 
  newPic2.style.animation = 'none';
  newPic2.offsetHeight; /* trigger reflow */
  newPic2.style.animation = null; 
  
  // Update the index
  currentIndex = currentIndex + 1 >= images.length ? 0 : currentIndex + 1;
}, 1500);

.wrapper {
  position: relative;
  top: 0;
  left: 0;
  float: left;
}

.oldPic1 {
  position: relative;
  top: 0;
  left: 0;
}

.newPic1 {
  position: absolute;
  top: 0;
  left: 0;
}

.oldPic2 {
  position: relative;
  top: 0;
  left: 100;
}

.newPic2 {
  position: absolute;
  top: 0;
  left: 100;
}

.fade-in {
  animation: fadein 1s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

<div class="wrapper">
  <img id="oldImage1" class="oldImage1" src="https://source.unsplash.com/ifhgv-c6QiY/100x100" />
  <img id="newImage1" class="newImage1 fade-in" src="https://source.unsplash.com/w5e288LU8SU/100x100" />
</div>
<div class="wrapper">
  <img id="oldImage2" class="oldImage2" src="https://source.unsplash.com/ifhgv-c6QiY/100x100" />
  <img id="newImage2" class="newImage2 fade-in" src="https://source.unsplash.com/w5e288LU8SU/100x100" />
</div>

Answer 4

If you want to achieve this with CSS animation, follow these steps for each cycle:

1) Change the image sources as you are currently doing

2) Restart the fade-in animation, read more here

3) Increment the index value

const images = [
  'https://source.unsplash.com/iMdsjoiftZo/100x100',
  'https://source.unsplash.com/ifhgv-c6QiY/100x100',
  'https://source.unsplash.com/w5e288LU8SU/100x100'
];

let currentIndex = 0;

const oldPic1 = document.getElementById('oldImage1');
const newPic1 = document.getElementById('newImage1');
const oldPic2 = document.getElementById('oldImage2');
const newPic2 = document.getElementById('newImage2');

window.setInterval(() => {
  // Replace new image with the old one
  oldPic1.src = newPic1.src;
  oldPic2.src = newPic2.src;
  
  // Set a new image
  newPic1.src = images[currentIndex];
  newPic2.src = images[currentIndex];
  
  // Reset the animation
  newPic1.style.animation = 'none';
  newPic1.offsetHeight; /* trigger reflow */
  newPic1.style.animation = null; 
  newPic2.style.animation = 'none';
  newPic2.offsetHeight; /* trigger reflow */
  newPic2.style.animation = null; 
  
  // Update the index
  currentIndex = currentIndex + 1 >= images.length ? 0 : currentIndex + 1;
}, 1500);

.wrapper {
  position: relative;
  top: 0;
  left: 0;
  float: left;
}

.oldPic1 {
  position: relative;
  top: 0;
  left: 0;
}

.newPic1 {
  position: absolute;
  top: 0;
  left: 0;
}

.oldPic2 {
  position: relative;
  top: 0;
  left: 100;
}

.newPic2 {
  position: absolute;
  top: 0;
  left: 100;
}

.fade-in {
  animation: fadein 1s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

<div class="wrapper">
  <img id="oldImage1" class="oldImage1" src="https://source.unsplash.com/ifhgv-c6QiY/100x100" />
  <img id="newImage1" class="newImage1 fade-in" src="https://source.unsplash.com/w5e288LU8SU/100x100" />
</div>
<div class="wrapper">
  <img id="oldImage2" class="oldImage2" src="https://source.unsplash.com/ifhgv-c6QiY/100x100" />
  <img id="newImage2" class="newImage2 fade-in" src="https://source.unsplash.com/w5e288LU8SU/100x100" />
</div>

Creating a dynamic effect with JavaScript: Transitioning background images with a fading effect

Answer №1

Answer №2

Similar questions

How can I trigger an event to append a UL element using

Building a JavaScript module worker: Step-by-step guide

The accuracy of getBoundingClientRect in calculating the width of table cells (td)

Testing for packet loss using JavaScript

Guide to dynamically adding content to a React component during rendering

I am facing an issue with my React JS component where it is only able to update the first time I click on a row in

Tips for effectively removing objects from a PixiJS application

The slider causing conflicts with widgets and content positioned below it in an HTML layout

Adding an element and updating its innerHTML can be achieved without relying on jQuery. Let's look at how this can be

React-Native introduces a new container powered by VirtualizedList

Is there a way to incorporate a background image fadeIn effect for ul using CSS3?

How can you reposition a component within the dom using Angular?

MongoError: What to do when the pipeline needs text score metadata, but no text score is provided?

Scraping data from a webpage using Node.js and the Document Object Model

Controller function not being triggered by ng-click directive

What could be causing the border around my three.js canvas?

Using Vue to store form elements inside a component and accessing the data

Solutions for resolving the error "Unable to access property 'value1' because it is undefined"

Repeatedly triggering the Jquery Dialog Event

JavaScript method that accepts two functions as arguments