DEV Community

Cover image for Fading images using JavaScript
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

Fading images using JavaScript

The other day, I worked on a pretty simple HTML website and wanted to have some fading images but not bloatware of JavaScript plugins.

Hence I tried how easy this could be with some simple Vanilla JavaScript and CSS.

I'll show you the most straightforward way, which does involve background-images, we could achieve this with actual images, but we'll try that in another article.

You can see the result for this article in the following Codepen.

HTML Structure

Let's first look at the HTML structure we need for this.
It comes down to a simple placeholder.

<div id="fadingImage" class="image-styled"></div>
Enter fullscreen mode Exit fullscreen mode

As you can see, I added an ID to use as a JavaScript selector and a class to add some styling.

That will all for our HTML structure. You can work around this, as a single div will be all we need.

Styling the image

Now let's add some styling to our image. As you could see in our HTML, I added the image-styled class.

This will be the final CSS:

.image-styled {
  background-position: center;
  background-size: cover;
  background-image: url("img.jpg");
  display: flex;
  height: 75vmin;
  width: 75vmin;
  transition: background 0.5s linear;
}
Enter fullscreen mode Exit fullscreen mode

The main elements are the background tags, which will style the image nice and centered in our div.
We then use flex and viewport queries to make it appeal nicely.
The last line with the transition will make sure it smoothly fades between the images.

You can leave the transition if you want a simple, immediate switch of the images.

Replacing images with JavaScript

We will be using JavaScript to replace our image.
First, let's define an array of images, starting with the one we used in CSS.

const images = [
  "img.jpg",
  "2.jpg", 
  "3.jpg"
];
Enter fullscreen mode Exit fullscreen mode

Then, we'll also need to have a reference to the image element.

const imageEl = document.getElementById("fadingImage");
Enter fullscreen mode Exit fullscreen mode

The next part will bring it together. We will be using the setInterval method in JavaScript to execute code every x time.

In our case, 5000 milliseconds, you can alter this in any way you like.

window.setInterval(changePicture, 5000);
Enter fullscreen mode Exit fullscreen mode

That piece of code will call a function called changePicture every 5000ms.
Let's create the changePicture function now.

let i = 0;
function changePicture() {
  i++;
  if (i > images.length - 1) i = 0;
  imageEl.style.backgroundImage = `url(${images[i]})`;
}
Enter fullscreen mode Exit fullscreen mode

What we do here is firstly create a variable counter that is set to the first element.

Then inside, we plus the counter, if it hits the number of images, we defined we reset it to zero.

We use zero because arrays start at 0

Then we modify the background image of the div.
Because we used the transition in CSS, it will give us a fading effect.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Top comments (2)

Collapse
 
rushannotofficial profile image
Rushan S J

Wow, this was simple and understandable. Nice Work !

Collapse
 
dailydevtips1 profile image
Chris Bongers

Thanks! Glad you liked the article