Create a Sequential Image Fade-In With JavaScript and CSS

In an article last year I demonstrated how to fade in images one after another on a web page using JQuery. As JavaScript grows and browser version adoption rates mature, the need for JQuery – originally written to fill and smooth gaps and inconsistencies with Internet Explorer’s support for JavaScript – becomes less and less.

The code that follows, written in pure JavaScript and CSS, will run in modern browsers, including Firefox, Chrome, Safari and Internet Explorer 9 and above.

The basic HTML:

<div id="cars">

<img src="talbot-lago-t23-teardrop-coupé.jpg" alt="">

<img src="alfa-romeo-bat-7.jpg" alt="Photograph of blue Alfa Romeo BAT-7">

<img src="hispano-suiza-dubonnet-xenia-top.jpg" alt="Photograph of Hispano-Suiza Dubonnet Xenia car from above">

<img src="hispano-suiza-dubonnet-xenia-back.jpg" alt="Photograph of Hispano-Suiza Dubonnet Xenia car from behind">

</div>

The CSS describes the default appearance of the images and the <div> that contains them, together with a  .visible class, which will be applied later via JavaScript:

div#cars { font-size: 0; background: #000; } 

div#cars img { width: 50%; height: auto; 

opacity: 0; transition: .8s opacity; }

div#cars img.visible { opacity: 1; }

The stylesheet declares that all images in the <div> will be invisible by default, and any image with a class of .visible applied to it will fade in over a little less than a second. The CSS is shown without vendor prefixes for simplicity.

Finally, at the end of the page, the script:

<script>

var cars = document.querySelectorAll("#cars img"), i = 1;

Array.prototype.forEach.call(cars, function(car) { 

      setTimeout(function(){ car.classList.add("visible") }, 700*i)

i++;

})

</script>

The JavaScript gathers all of the images in the <div> and sets an incremental variable. It then loops through each image, adding a class of .visible. Due to the timeout function, each image will have its class added 700ths of a second after the previous one, creating a series of transitioned photographs. Alternatively, you could ignore the class and apply the new opacityvalue directly to the images with JavaScript; the transition will work either way.

Fallbacks

To play safe with older versions of IE, you could simply add a conditional comment after your stylesheet that set the opacity of the images to 1 by default for IE 8 and earlier:

<!--[if lt IE 9]>

<style type=";text/css">

div#cars img { opacity: 1; }

</style>

<![endif]-->

In the rare case of JavaScript being blocked or failing, the images could be faded in with a keyframe animation set to bring the images to complete opacity after a 4 second delay:

@keyframes solidbackup {

      to { opacity: 1; }

}

div#cars img { animation: solidbackup 1s 4s forwards; }

Conclusion

As you can see, it’s entirely possible to create relatively complex animation sequences without the need for 100K frameworks, allowing both CSS and JavaScript to work together in harmony, each doing what it does best. Experiment with this code on CodePen