Fading background image with javascript on image switch

Question

I have three images which my two div's switch between. However, the animation appears too rough. How do I apply a fade right before the switch?

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

This loops continuously so I do not want it just fading in on the first load.

Frighi · Accepted Answer · 2018-07-31T01:56:23.087

Without JQuery you'll have cross-browser compatibility issue. So i suggest you to use JQuery to achieve this.

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

And you have to add this to css:

.my-image{
  display:none;
}

In case you not use display: block to you element: Your CSS will be:

.my-image{
  display:whatYouWant;
}

Then need add 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 will work because fadeIn() set to display the previous value.

If you want div visible before image adding, remove $(document).ready() call and edit displayNextImage():

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

I understand what you did but on load it makes the divs dissapear then reappear after the timer with the new image. I do not want the divs to dissapear on load. — James, Jul 31 '18 at 01:11
On load the div is still missing and this only fades slow the first time after that it doesn't anymore then it just changes the pictures. Thanks for the help anyway. — James, Jul 31 '18 at 01:46
Ops, I didn't understand you want visible divs before images, I edited answer again — Frighi, Jul 31 '18 at 01:56

score 0 · Answer 2 · answered Jul 31 '18 at 01:11

You can do it with CSS animation, for each cycle:

1) swap the image sources like you are already doing

2) reset the fade in animation, more info here

3) increment your index

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

let index = 0;

const oldImage1 = document.getElementById('oldImage1');
const newImage1 = document.getElementById('newImage1');
const oldImage2 = document.getElementById('oldImage2');
const newImage2 = document.getElementById('newImage2');

window.setInterval(() => {
  // put new image in old image
  oldImage1.src = newImage1.src;
  oldImage2.src = newImage2.src;
  
  // Set new image
  newImage1.src = imgs[index];
  newImage2.src = imgs[index];
  
  // reset animation
  newImage1.style.animation = 'none';
  newImage1.offsetHeight; /* trigger reflow */
  newImage1.style.animation = null; 
  newImage2.style.animation = 'none';
  newImage2.offsetHeight; /* trigger reflow */
  newImage2.style.animation = null; 
  
  // increment x
  index = index + 1 >= imgs.length ? 0 : index + 1;
}, 1500);

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

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

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

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

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

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

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

<div class="parent">
  <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="parent">
  <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>

Fading background image with javascript on image switch

2 Answers2