javascript - Images array with random starting point and fade ins needs smoother transitions

I have a full screen slideshow of four images (in an array) that loads/starts at a random image then cycles through the rest of the images with fade ins. My problem is the fade ins do not fade over the previous image, but fades in from white (or a background color if/when added). I would like a crossfade wherein new image and current image fade smoothly in and out respectively, but I'm at a loss. I can create a crossfading slideshow without a random starting point, so I'm familiar with javascript to CSS, but the javascript code that I've stitched together for the added random start has me flailing. I've spent hours on stack overflow going through similar issues but none have done the job. My ignorance in javascript is definitely an issue, but I'm usually capable enough to get done what I need to get done. Any help is greatly appreciated, with JS fiddles and-or notes if possible. Thanks in advance, code as follows:

const images = [
  "/id/650/1000",
  "/id/651/1000",
  "/id/652/1000",
  "/id/653/1000",
];

const imgElement = document.getElementById("myImage");

let currentIndex;

function fadeInImage(index) {
  imgElement.style.opacity = 0;
  imgElement.src = images[index];
  let opacity = 0;
  imgElement.style.opacity = opacity;

  const intervalId = setInterval(() => {
    opacity += 0.01;
    imgElement.style.opacity = opacity;

    if (opacity >= 1) {
      clearInterval(intervalId);
    }

  }, 20);

  currentIndex = index;

}

function playImages() {
  let randomIndex = Math.floor(Math.random() * images.length);
  fadeInImage(randomIndex);

  setInterval(() => {
    currentIndex = (currentIndex + 1) % images.length;
    fadeInImage(currentIndex);
  }, 5000);
}

playImages();

body,
html {
  height: 100%;
  margin: 0;
  padding: 0px;
  outline: none;
  border: 0px;
}

.homehero {
  height: 100%;
}

.homehero img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

<div class="homehero"><img id="myImage" alt="" /></div>

const images = [
  "https://picsum.photos/id/650/1000",
  "https://picsum.photos/id/651/1000",
  "https://picsum.photos/id/652/1000",
  "https://picsum.photos/id/653/1000",
];

const imgElement = document.getElementById("myImage");

let currentIndex;

function fadeInImage(index) {
  imgElement.style.opacity = 0;
  imgElement.src = images[index];
  let opacity = 0;
  imgElement.style.opacity = opacity;

  const intervalId = setInterval(() => {
    opacity += 0.01;
    imgElement.style.opacity = opacity;

    if (opacity >= 1) {
      clearInterval(intervalId);
    }

  }, 20);

  currentIndex = index;

}

function playImages() {
  let randomIndex = Math.floor(Math.random() * images.length);
  fadeInImage(randomIndex);

  setInterval(() => {
    currentIndex = (currentIndex + 1) % images.length;
    fadeInImage(currentIndex);
  }, 5000);
}

playImages();

body,
html {
  height: 100%;
  margin: 0;
  padding: 0px;
  outline: none;
  border: 0px;
}

.homehero {
  height: 100%;
}

.homehero img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

<div class="homehero"><img id="myImage" alt="" /></div>

Share Improve this question edited 2 days ago Brett Donald 14.8k5 gold badges35 silver badges61 bronze badges asked 2 days ago SJR 93 bronze badges New contributor SJR is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

5 "My problem is the fade ins do not fade over the previous image" - of course they don't, because you only have one single image element. As soon as you assign a new src for that, the previously displayed image is gone. You need two img elements for this, placed on top of each other, and then manipulate the opacity of the top one. – C3roe Commented 2 days ago
I think I'm with you, but my javascript skills are subpar to be sure. I have four images, shouldn't I have four img elements? With multiple img elements do I need to scrap my current javascript approach? – SJR Commented 2 days ago
You only want to replace the current image with the next one, right? Then you don't need four img elements, no. – C3roe Commented 2 days ago
Agreed with @C3roe, but you need to reduce the opacity of previous image element and then increase the next image opacity. – Rohan Kumar Commented 2 days ago
Thank you C3roe and Rohan for your replies. Thank you Rohan for the time you've spent breaking things down. I'm learning quite a lot. Your provided code is almost perfect for my project. Fades are great but the random image simply appears and is then quickly covered by the next fading image. So while the post-random images loop in and over, fading nicely, the random image seems like a blip, flash, or mistake whenever loaded. Is it possible to load one of the four images at random with the same fade/delay as the remaining looping images? Thank you again for your time, it's greatly appreciated. – SJR Commented 2 days ago

Add a comment |

2 Answers 2

Sorted by: Reset to default 1

Use an <img> element for each url. Animate current <img> and previous <img> simeotaneously with classes and keyframes in CSS.

For each image url create a <img> and append them to an element that has CSS style: position: relative (eg. <main>):

const sources = [
  "https://i.ibb.co/21Y5cTF5/Bounty-Hunters.jpg",
  "https://i.ibb.co/Db81LKd/Stormtroopers.jpg",
  "https://i.ibb.co/q94PSgq/BobaFett.webp",
  "https://i.ibb.co/gMfKY4mB/Star-Wars-Poster.jpg",
];

const main = document.querySelector("main");

const images = sources.map((src, idx) => {
  const img = document.createElement("img");
  img.src = src;
  main.append(img);
  return img;
});

Array images is an array of all <img>s. All <img> CSS default style should be: position: absolute; and z-index: -1; so that they are "under" everything and hidden.

Next, assign global variable index randomly and run fade() function. fade():
1. removes all classes from all <img>s.
2. assigns class .fadeIn to the <img> at index position within the images array
3. assigns class .fadeOut to the <img> positioned before the <img> with class .fadeIn.
```
let index = Math.floor(Math.random() * images.length);

const fade = () => {
  images.forEach(img => img.className = "");
  images[index].classList.add("fadeIn");
  let before = index === 0 ? images.length - 1 : index - 1;
  images[before].classList.add("fadeOut");
};

fade();
```
Class .fadeIn sets <img> above all <img>s with z-index: 1 and transitions opacity from 0 to 1. Class .fadeOut sets <img> below <img> with class .fadeIn and transitions opacity from 1 to 0.

Finally, run fade() every 5 seconds.

 setInterval(() => {
   index = (index + 1) % images.length;
   fade();
 }, 5000);

Note: if there's any lag or partial images it's probably the imagehost.

const sources = [
  "https://i.ibb.co/21Y5cTF5/Bounty-Hunters.jpg",
  "https://i.ibb.co/Db81LKd/Stormtroopers.jpg",
  "https://i.ibb.co/q94PSgq/BobaFett.webp",
  "https://i.ibb.co/gMfKY4mB/Star-Wars-Poster.jpg",
];

const main = document.querySelector("main");

const images = sources.map((src, idx) => {
  const img = document.createElement("img");
  img.src = src;
  main.append(img);
  return img;
});

let index = Math.floor(Math.random() * images.length);

const fade = () => {
  images.forEach(img => img.className = "");
  images[index].classList.add("fadeIn");
  let before = index === 0 ? images.length - 1 : index - 1;
  images[before].classList.add("fadeOut");
};

fade();

setInterval(() => {
  index = (index + 1) % images.length;
  fade();
}, 5000);

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #000;
  overflow: hidden;
}

main {
  position: relative;
  width: 100%;
  height: 100%;
}

img {
  position: absolute;
  z-index: -1;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

img:last-child {
  object-position: center top;
}

.fadeIn {
  z-index: 1;
  animation: fadeIn 2s forwards;
}

.fadeOut {
  z-index: 0;
  animation: fadeOut 2s forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

<main></main>

Thanks again for the assist. Using provided input I went in a different direction and believe I have a working solution. I'm posting code here for others who might find it helpful. I would suggest preloading these images (especially if using for a header/hero option else the first loop will probably appear wonky. Once images are loaded, crossfades are smooth and a random image is served as site starting point (to then run through remaining images in array). I'm sure there are other ways to achieve this, but feel free to throw out any red-flag warnings I should consider.

<!DOCTYPE html>
<html>
<head>
<title>random start slideshow</title>

<style>

.upper {
position: absolute;
z-index: 1;
width: 500px;
height: 300px;
}

.upper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}

.upper img.active { opacity: 1; }

.lower {
position: relative;
width: 500px;
height: 300px;
}

.lower img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}

.lower img.active { opacity: 1; }

</style>
</head>
<body>

<div class="upper" id="container1"></div>
<div class="lower" id="container2"></div>

<script>

const images = [
"https://picsum.photos/id/650/1000",
"https://picsum.photos/id/651/1000",
"https://picsum.photos/id/652/1000",
"https://picsum.photos/id/653/1000",
];

const container1 = document.getElementById('container1');
const container2 = document.getElementById('container2');

let currentIndex = Math.floor(Math.random() * images.length);
let nextIndex;

function showImage(container, index) {
const img = document.createElement('img');
img.src = images[index];
img.onload = () => {
container.appendChild(img);
setTimeout(() => {
img.classList.add('active');
}, 5);
};
}

function crossfadeImages() {
nextIndex = (currentIndex + 1) % images.length;
showImage(container2, nextIndex);
const currentImage = container1.querySelector('img');
if (currentImage) {
currentImage.classList.remove('active');
currentImage.addEventListener('transitionend', () => {
currentImage.remove();
container1.innerHTML = container2.innerHTML;
container2.innerHTML = '';
currentIndex = nextIndex;
setTimeout(crossfadeImages, 4000);
}, { once: true });
} else {
container1.innerHTML = container2.innerHTML;
container2.innerHTML = '';
currentIndex = nextIndex;
setTimeout(crossfadeImages, 4000);
}
}

showImage(container1, currentIndex);
setTimeout(crossfadeImages, 4000);

</script>
</body>
</html>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Images array with random starting point and fade ins needs smoother transitions - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)