A Mobile-Ready Before-And-After Image Comparison UI

Previously I demonstrated a before-and-after image comparison technique using the HTML5 range input. From a UX perspective, the operation of that slide comparer could be significantly improved, as it requires the user to interact with a relatively tiny UI element. The before and after images already feature a giant vertical visual divisor…  why not use that as the UI to explore the difference between them?

In this case, I’m showing a inked and colored comic panel by Heath Foley, used with permission. The HTML code is very simple:

<div id="inked-painted">

 <img src="inked-panel.png" id="inked" alt>

 <div id="colored"></div>

</div>

The inked panel (the black and white drawing) is the only actual image in the code, and serves to keep the outer container open to the correct size. The colored panel is added as a background-image to the inner <div>:

div#inked-painted { position: relative; font-size: 0; }

div#inked-painted img { width: 100%; height: auto; }

div#colored {

 background-image: url(colored-panel.jpg);

 position: absolute;

 top: 0; left: 0; height: 100%;

 width: 50%;

 background-size: cover;

}

We want to track any mouse movement that takes place inside the <div>. To do this, we add a script to the end of the page:

var inkbox = document.getElementById("inked-painted");

var colorbox = document.getElementById("colored");

var fillerImage = document.getElementById("inked");

inkbox.addEventListener( "mousemove", trackLocation, false);

function trackLocation(e) {

 var rect = fillerImage.getBoundingClientRect();

 var position = ((e.pageX - rect.left) / fillerImage.offsetWidth)*100;

 if (position <= 100) { colorbox.style.width = position+"%"; }

}

Because the <div> is responsive, we can’t use the width property to measure its dimensions. Instead, we take the horizontal location of the mouse when it is active inside the area, subtract the current position of the left edge of the <div>, divide that by the current width of the image, and multiply the result by 100 to get the location of the mouse as a percentage. The result is then applied as the width of the inner <div>, which contains the colored background image.

To make it clear to the user what they’re doing at this point in time, I also change the mouse cursor:

div#inked-painted:hover { cursor: col-resize; }

Adding Mobile Support

Most mobile devices don’t have a mouse interface, but operate on touch. While the JavaScript function to move the divisor can remain the same, we have to add to what initiates it to gain mobile support:

inkbox.addEventListener( "touchstart", trackLocation, false);

inkbox.addEventListener( "touchmove", trackLocation, false);

We have to add coverage of both events, as the divisor should be relocated both on initial touch and when the user drags with their finger.

Too long a touch on the screen, or a double-tap event, will usually initiate a OS-level behavior: copying, for example. We want to avoid that: not for the purposes of DRM, but to make the UI as uninterruptable as possible. That can be achieved with CSS:

div#inked-painted {

 position: relative; font-size: 0;

 -ms-touch-action: none;

 -webkit-touch-callout: none;

 -webkit-user-select: none;

}

Conclusion

There are still a few areas where the comparator could be improved, particularly in regards to its mobile performance. I’ll address that, and more, in future articles. Play with the code for this image comparator on CodePen