Interactive Before-After Image Comparison

index.html

<div style="width: 80%; margin: 0 auto">
  <div id="inked-painted">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/inked-panel.png" id="inked" alt>
    <div id="colored"></div>
</div>

Interactive Before-After Image Comparison.markdown

Interactive Before-After Image Comparison

A variation on my previous work.

A Pen by Dudley Storey on CodePen.

License.

script.js

var inkbox = document.getElementById("inked-painted");
var colorbox = document.getElementById("colored");
var fillerImage = document.getElementById("inked");
inkbox.addEventListener("mousemove",trackLocation,false);
inkbox.addEventListener("touchstart",trackLocation,false);
inkbox.addEventListener("touchmove",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+"%"; }
}

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

body { background: #113; }
div#inked-painted { 
  position: relative; font-size: 0; 
  -ms-touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}
div#inked-painted img { 
  width: 100%; height: auto; 
}
div#colored { 
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/colored-panel.jpg);
  position: absolute;
  top: 0; left: 0; height: 100%;
  width: 50%;
  background-size: cover; 
}
div#inked-painted:hover {
  cursor: col-resize; 
}