Skip to content

Instantly share code, notes, and snippets.

@kingstakh

kingstakh/Interactive Before-After Image Comparison.markdown

Created July 28, 2015 17:36
Show Gist options
  • Save kingstakh/8ecd96c8265d4c2c3520 to your computer and use it in GitHub Desktop.
Save kingstakh/8ecd96c8265d4c2c3520 to your computer and use it in GitHub Desktop.
Download ZIP
Interactive Before-After Image Comparison
Raw
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>
Raw
Interactive Before-After Image Comparison.markdown
Raw
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+"%"; }
}
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment