Continuous animation for a sequence of overlapping images with smooth transitions

Question

Continuous animation for a sequence of overlapping images with smooth transitions

Currently, I am in the process of developing a JavaScript script that will cycle through a series of images within the same <div>. The goal is to create a seamless animation effect with the image transitions. Although the images are cycling through, the transition is not as smooth as desired.

var slideIndex = 0;

showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
    slides[i].style.opacity = "0";
  }
  
  slideIndex++;
  
  if (slideIndex > slides.length) {
    slideIndex = 1
  }
  
  slides[slideIndex - 1].style.display = "block";
  slides[slideIndex - 1].style.opacity = "1";
  setTimeout(showSlides, 2500);
  // Implementing a transition effect on the images.
  slides[slideIndex - 1].style.transition = "all 2.50s";
  // Introducing a delay for the images during transition.
  slides[slideIndex - 1].style.transitionDelay = "2.50s";
}

<div class="p-centered">
  <img src="https://picsum.photos/200?1" class="img-responsive mySlides" alt="">
  <img src="https://picsum.photos/200?2" class="img-responsive mySlides" alt="">
  <img src="https://picsum.photos/200?3" class="img-responsive mySlides" alt="">
  <img src="https://picsum.photos/200?4" class="img-responsive mySlides" alt="">
  <img src="https://picsum.photos/200?5" class="img-responsive mySlides" alt="">
</div>

javascript html css animation css-transitions

Answer 1

Answer №1

Enhanced with proper pointer-events functionality

Take a look at this illustration utilizing display: grid to arrange the images in a stack.

The core structure of the original code remains intact, with some static styles being relocated to CSS for a more organized JavaScript codebase.

We trust that this example proves beneficial!

For instance:

var slideIndex = 0;
var slides = document.getElementsByClassName("mySlides");

// Static styles moved to CSS for cleanliness
showSlides();

function showSlides() {
  // Display current image
  slides[slideIndex].classList.add("active");     
  // Hide previous image
  const prevIndex = slideIndex === 0 ? slides.length - 1 : slideIndex - 1;
  slides[prevIndex].classList.remove("active");
  // Prepare index for next cycle
  slideIndex === slides.length - 1 ? (slideIndex = 0) : slideIndex++;
  // Set delay for next cycle
  setTimeout(showSlides, 2500);
}

.p-centered {
  display: grid;
  width: fit-content;
}

.mySlides {
  grid-area: 1/ 1/ 1 /1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.50s linear;
}

.active {
  opacity: 1;
  pointer-events: auto;
}

<div class="p-centered">
  <img src="https://picsum.photos/200?1" class="img-responsive mySlides" alt="">
  <img src="https://picsum.photos/200?2" class="img-responsive mySlides" alt="">
  <img src="https://picsum.photos/200?3" class="img-responsive mySlides" alt="">
  <img src="https://picsum.photos/200?4" class="img-responsive mySlides" alt="">
  <img src="https://picsum.photos/200?5" class="img-responsive mySlides" alt="">
</div>

Answer 2

Enhanced with proper pointer-events functionality

Take a look at this illustration utilizing display: grid to arrange the images in a stack.

The core structure of the original code remains intact, with some static styles being relocated to CSS for a more organized JavaScript codebase.

We trust that this example proves beneficial!

For instance:

var slideIndex = 0;
var slides = document.getElementsByClassName("mySlides");

// Static styles moved to CSS for cleanliness
showSlides();

function showSlides() {
  // Display current image
  slides[slideIndex].classList.add("active");     
  // Hide previous image
  const prevIndex = slideIndex === 0 ? slides.length - 1 : slideIndex - 1;
  slides[prevIndex].classList.remove("active");
  // Prepare index for next cycle
  slideIndex === slides.length - 1 ? (slideIndex = 0) : slideIndex++;
  // Set delay for next cycle
  setTimeout(showSlides, 2500);
}

.p-centered {
  display: grid;
  width: fit-content;
}

.mySlides {
  grid-area: 1/ 1/ 1 /1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.50s linear;
}

.active {
  opacity: 1;
  pointer-events: auto;
}

<div class="p-centered">
  <img src="https://picsum.photos/200?1" class="img-responsive mySlides" alt="">
  <img src="https://picsum.photos/200?2" class="img-responsive mySlides" alt="">
  <img src="https://picsum.photos/200?3" class="img-responsive mySlides" alt="">
  <img src="https://picsum.photos/200?4" class="img-responsive mySlides" alt="">
  <img src="https://picsum.photos/200?5" class="img-responsive mySlides" alt="">
</div>

Answer 3

Answer №2

Utilize a single class that incorporates Opacity and Transition effects.

Employ JavaScript to activate the specified class.

I have optimized your JS code so that you no longer need to loop through all images each time to hide them.

var slides = document.getElementsByClassName("mySlides");
var slideIndex = 0;

// Initially show the first image
slides[0].classList.add("show");

setInterval(showSlides, 2500);

function showSlides() {
  // Hide current image
  slides[slideIndex].classList.remove("show");

  // Update index
  slideIndex++;
  if (slideIndex >= slides.length) {
    slideIndex = 0
  }
  
  // Show new current image
  slides[slideIndex].classList.add("show");
}

.p-centered {
  position: relative;
}

.mySlides {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: all 2000ms;
}

.mySlides.show {
  opacity: 1;
}

<div class="p-centered">
  <img src="https://picsum.photos/200?1" class="img-responsive mySlides" alt="">
  <img src="https://picsum.photos/200?2" class="img-responsive mySlides" alt="">
  <img src="https://picsum.photos/200?3" class="img-responsive mySlides" alt="">
  <img src="https://picsum.photos/200?4" class="img-responsive mySlides" alt="">
  <img src="https://picsum.photos/200?5" class="img-responsive mySlides" alt="">
</div>

Answer 4

Utilize a single class that incorporates Opacity and Transition effects.

Employ JavaScript to activate the specified class.

I have optimized your JS code so that you no longer need to loop through all images each time to hide them.

var slides = document.getElementsByClassName("mySlides");
var slideIndex = 0;

// Initially show the first image
slides[0].classList.add("show");

setInterval(showSlides, 2500);

function showSlides() {
  // Hide current image
  slides[slideIndex].classList.remove("show");

  // Update index
  slideIndex++;
  if (slideIndex >= slides.length) {
    slideIndex = 0
  }
  
  // Show new current image
  slides[slideIndex].classList.add("show");
}

.p-centered {
  position: relative;
}

.mySlides {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: all 2000ms;
}

.mySlides.show {
  opacity: 1;
}

<div class="p-centered">
  <img src="https://picsum.photos/200?1" class="img-responsive mySlides" alt="">
  <img src="https://picsum.photos/200?2" class="img-responsive mySlides" alt="">
  <img src="https://picsum.photos/200?3" class="img-responsive mySlides" alt="">
  <img src="https://picsum.photos/200?4" class="img-responsive mySlides" alt="">
  <img src="https://picsum.photos/200?5" class="img-responsive mySlides" alt="">
</div>

Answer 5

Answer №3

One approach to solving this issue is by maintaining all images with a display: block property and adjusting the opacity to create a fading effect continuously. Another option is to set the display: none property for images once they have completely faded out.

To make this method effective, the images should overlay each other. This can be achieved using the position: absolute property, assuming the containing element (the p-centered div) is manually sized. For example:

let slideIndex = 0;

function showSlides() {
  const slides = document.getElementsByClassName("slide");
  // Hide existing shown slides
  for (let i = 0; i < slides.length; i++) {
    slides[i].classList.remove('show');
  }
  // Show current slide
  slides[slideIndex % slides.length].classList.add('show');
  slideIndex++;
  setTimeout(showSlides, 2500);
}

window.addEventListener('load', showSlides);

.container {
  height: 274px; /* maximum image height */
}

.slide {
  position: absolute;
  opacity: 0; /* hide until `show` class */
  transition: opacity 0.5s;
}
.slide.show {
  opacity: 1;
}

<h1>Before Container</h1>

<div class="container">
  <img class="slide" src="https://www.wikipedia.org/portal/wikipedia.org/assets/img/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1c4b7577756c7978757d3170737b73316a2e5c2d322964326c727b">[email protected]</a>">
  <img class="slide" src="https://www.wikiversity.org/portal/wikiversity.org/assets/img/Wikiversity-logo-tiles_1.5x.png">
</div>

<h1>After Container</h1>

Answer 6

One approach to solving this issue is by maintaining all images with a display: block property and adjusting the opacity to create a fading effect continuously. Another option is to set the display: none property for images once they have completely faded out.

To make this method effective, the images should overlay each other. This can be achieved using the position: absolute property, assuming the containing element (the p-centered div) is manually sized. For example:

let slideIndex = 0;

function showSlides() {
  const slides = document.getElementsByClassName("slide");
  // Hide existing shown slides
  for (let i = 0; i < slides.length; i++) {
    slides[i].classList.remove('show');
  }
  // Show current slide
  slides[slideIndex % slides.length].classList.add('show');
  slideIndex++;
  setTimeout(showSlides, 2500);
}

window.addEventListener('load', showSlides);

.container {
  height: 274px; /* maximum image height */
}

.slide {
  position: absolute;
  opacity: 0; /* hide until `show` class */
  transition: opacity 0.5s;
}
.slide.show {
  opacity: 1;
}

<h1>Before Container</h1>

<div class="container">
  <img class="slide" src="https://www.wikipedia.org/portal/wikipedia.org/assets/img/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1c4b7577756c7978757d3170737b73316a2e5c2d322964326c727b">[email protected]</a>">
  <img class="slide" src="https://www.wikiversity.org/portal/wikiversity.org/assets/img/Wikiversity-logo-tiles_1.5x.png">
</div>

<h1>After Container</h1>

Continuous animation for a sequence of overlapping images with smooth transitions

Answer №1

Answer №2

Answer №3

Similar questions

Restricting Horizontal Scrolling in Dash DataTable with multi-tiered header (without any additional empty gaps)

Creating inner borders on a pie chart with HTML and CSS: A step-by-step guide

Enhancing Vue Filtered Lists for Increased Dynamism

Error message: "Ajax script is failing to run"

The issue of Google fonts failing to load on Windows browsers while loading perfectly on Mac browsers has been observed

What is the method for specifying a JSON object within a DOM element's `data` attribute?

What could be the reason my span is not altering color as I scroll?

Issue with fuse-box: unable to import ReactDOM

Converting Persian calendar date to Gregorian in JavaScript

Modifying website elements with JavaScript

Stretching Images on Circular Images - Utilizing Bootstrap and SCSS styling

Parcel JS: The function tree.render is missing or not defined

Executing a jQuery AJAX request for a second time

Using Struts2 actions in combination with jQuery AJAX calls

Show or hide a fixed position div using jQuery when clicked

jmpress: Scrolling through Absolutely Positioned Element (Slide) with dynamic height

Inquiries regarding real-time alerts and notifications

Use VB.NET to dynamically update cell content in HTML

vue implementing autoscroll for long lists

utilizing different background colors for rows in a Laravel table using CSS