WhiteFox,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style type='text/css'>
html, body{
height: 100%;
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.container > .top , .container > .bottom{
height: 100%; width: 100%;
position: absolute;
top: 0;
left: 0;
overflow: auto;
background-repeat: no-repeat;
background-size: cover;
background-image: url(http://s00.yaplakal.com/pics/pics_preview/6/1/9/9965916.jpg);
}
.container > .bottom{
background-image: url(http://s00.yaplakal.com/pics/pics_preview/7/1/9/9965917.jpg);
}
.container > .bar {
height: 100%;
width: 3px;
position: absolute;
top: 0px;
left: 50%;
cursor: move;
}
.container > .bar:after{
cursor: move;
width: 40px;
height: 40px;
position: absolute;
top: 48%;
left: -20px;
content: "";
border-radius: 20px;
background-color: hsla(217, 89%, 61%, .5);
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
var mousedown = "mousedown",
mousemove = "mousemove",
mouseup = "mouseup";
var touch = !!("ontouchstart" in window);
if (touch) mousedown = "touchstart", mousemove = "touchmove", mouseup = "touchend";
[].forEach.call(document.querySelectorAll(".container"), function(container) {
var bottom = container.querySelector(".bottom"),
bar = container.querySelector(".bar"),
left, h = container.clientHeight,
w = container.clientWidth;
var init = function(e) {
e.preventDefault();
touch && (e = e.changedTouches[0]);
left = e.clientX - this.offsetLeft;
h = container.clientHeight;
w = container.clientWidth;
clip(left);
container.addEventListener(mousemove, move, true);
window.addEventListener(mouseup, stop, true)
};
var move = function(e) {
touch && (e = e.changedTouches[0]);
var x = e.clientX - this.offsetLeft;
x = Math.min(w, Math.max(0, x));
clip(x)
};
var clip = function(left) {
bottom.style.clip = "rect(0," + left + "px," + h + "px,0)";
bar.style.left = left + "px"
};
clip(w / 2);
var stop = function(e) {
container.removeEventListener(mousemove, move, true);
window.removeEventListener(mouseup,
stop, true)
};
container.addEventListener(mousedown, init, true);
window.addEventListener("resize", function() {
clip(container.clientWidth / 2);
}, true);
})
});
</script>
</head>
<body>
<div class="container">
<div class="top"></div>
<div class="bottom"></div>
<div class="bar"></div>
</div>
<div class="container">
<div class="top" style="background-image: url(http://s00.yaplakal.com/pics/pics_preview/4/2/9/9965924.jpg)"></div>
<div class="bottom" style="background-image: url(http://s00.yaplakal.com/pics/pics_preview/5/2/9/9965925.jpg)"></div>
<div class="bar"></div>
</div>
</body>
</html>
