A variation on my previous work.
A Pen by Dudley Storey on CodePen.
<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> |
A variation on my previous work.
A Pen by Dudley Storey on CodePen.
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+"%"; } | |
} |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
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; | |
} |