Slideshow of background images?

Xway
1

Hello all.
I love the way you can use background images in Xway which take up the whole browser screen, it looks terrific. I was wondering - is there a way to have more than one image as a background image- maybe a different image appearing every 5 seconds in a loop?
Thanks!

2

Yes, using JavaScript you can animate a property like this. But not in HTML/CSS alone.

Here’s an example from https://walterdavis.studio

<script>
function getRandomInt(max) {
return Math.floor(Math.random() * max);
}
var opts = ['asparagus-2', 'cait-oct-201812', 'fleurs-5', 'grapes-2', 'leica', 'orange', 'satellite-4', 'straubs-2'];
var img = opts[getRandomInt(opts.length)];
var cover = document.getElementById('cover');
cover.style.backgroundImage = 'url("../images/' + img + '.jpg")';
setInterval(function(){
var img = 'url("../images/' + opts[getRandomInt(opts.length)] + '.jpg")';
cover.style.opacity = 0.0;
setTimeout(function(){
cover.style.backgroundImage = img;
cover.style.opacity = 1.0;
}, 1000);
}, 9000);
</script>

This works by using a pseudo-random number generator to pick one of the image options in the list. There is a black background image on the page body, a “cover” DIV set to match the viewport dimensions floating above that, and a CSS transition property animating the opacity changes. Every 9 seconds, the outer setInterval timer triggers the following set of events:

  1. The cover is set to opacity: 0. This takes one second to change, because of the transition CSS setting.
  2. A timer is set with setTimeout for one second to swap in the next image and set its opacity to 1.0.
  3. The transition and the inner timer both end at approximately the same time, and thus the image fades all the way out to black, then fades back in to the new image.

Owing to the way that random works with a small set of possible values, it is possible to see the same image twice. If there were more images, it would be less likely, butt no less impossible.

Walter

3 Likes