Requested in response to my earlier comparison sliders. Full article.
A Pen by Dudley Storey on CodePen.
Requested in response to my earlier comparison sliders. Full article.
A Pen by Dudley Storey on CodePen.
<div id="video-compare-container"> | |
<video loop autoplay poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/dirty.jpg"> | |
<source src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/floodplain-dirty.mp4> | |
<source src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/floodplain-dirty.webm> | |
</video> | |
<div id="video-clipper"> | |
<video loop autoplay poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/clean.jpg"> | |
<source src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/floodplain-clean.mp4> | |
<source src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/floodplain-clean.webm> | |
</video> | |
</div> | |
</div> |
function trackLocation(e) { | |
var rect = videoContainer.getBoundingClientRect(), | |
position = ((e.pageX - rect.left) / videoContainer.offsetWidth)*100; | |
if (position <= 100) { | |
videoClipper.style.width = position+"%"; | |
clippedVideo.style.width = ((100/position)*100)+"%"; | |
clippedVideo.style.zIndex = 3; | |
} | |
} | |
var videoContainer = document.getElementById("video-compare-container"), | |
videoClipper = document.getElementById("video-clipper"), | |
clippedVideo = videoClipper.getElementsByTagName("video")[0]; | |
videoContainer.addEventListener( "mousemove", trackLocation, false); | |
videoContainer.addEventListener("touchstart",trackLocation,false); | |
videoContainer.addEventListener("touchmove",trackLocation,false); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
body { | |
background: #333; | |
margin: 2rem; | |
} | |
#video-compare-container { | |
display: inline-block; | |
line-height: 0; | |
position: relative; | |
width: 100%; | |
padding-top: 42.3%; | |
} | |
#video-compare-container > video { | |
width: 100%; | |
position: absolute; | |
top: 0; height: 100%; | |
} | |
#video-clipper { | |
width: 50%; position: absolute; | |
top: 0; bottom: 0; | |
overflow: hidden; | |
} | |
#video-clipper video { | |
width: 200%; | |
postion: absolute; | |
height: 100%; | |
} |