Downtown Calgary in 2013 and 1943; mouse down or touch on photo to reveal

I’ve previously demonstrated several “sliding” before-and-after comparators for images and video that track mouse movement from side to side. More precise “scratch-off” interfaces can be useful for comparing particular kinds of images, such as photos taken at different times in history, or comparing a sketch against a final product.

Other examples I’ve found of this technique are rather complicated and over-coded, or have framework dependencies; by comparison, the code for this technique is relatively straightforward, and written in pure JavaScript.

A dancer balancing on one hand A dancer jumping on a bridge A dancer in front of a black-and-white background A dancer in the center of a bridge

Some time ago I wrote a small script that automated the process of creating a responsive image carousel. While the same result could be achieved using pure CSS, doing so required that keyframes had to be recalculated when the number of images changed. Written in pure , my solution retained the performance advantages of by writing a keyframe animation using a wide range of options.

The script presented here accomplishes a similar result, only with a fade-in sequence: again, you can add as many images as you like, in the order you wish. The only requirement is that that all the images must be all the same size:

wise-man-thumb

“Lightbox” effects have been an established UI pattern for a decade, but the vast majority of implementations have been framework-dependent. In previous articles I’ve shown how to create a Lightbox UI using only CSS, although that version lacked controls. By adding the <dialog> element and a dozen lines of vanilla JavaScript, we can recreate a traditional lightbox perfectly: