JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<div class="image-dif">
    <img src="http://www.dr.dk/nyheder/htm/baggrund/generel/normandybeach-nj-1.jpg" />
    <img src="http://www.dr.dk/nyheder/htm/baggrund/generel/normandybeach-nj-2.jpg" />
</div>

CSS

html, body {
    height: 100%;
}

.image-dif {
    position: relative;
    float: left;
    margin:50px;
    -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
}
.image-dif img {
    display: block;
    pointer-events: none;
}
.image-dif > div {
    position: absolute;
    top: 0;
    left: 0;
    background: transparent none 0 0 no-repeat;
    border-right: 2px solid #CCC;
    width: 50%;
    height: 100%;
    z-index: 1;
}
.image-dif > div:after {
    content: " ";
    position: absolute;
    display: block;
    top: 50%;
    right: 0;
    margin-right: -5px;
    margin-top: -28px;
    width: 8px;
    height: 56px;
    background-color: green;   
    z-index: 2; 
}

JavaScript

var body = document.id(document.body);
document.getElements("div.image-dif").each(function(dif){
    var left = dif.getPosition().x,
        img = dif.getElement("img"),
        maxWidth = img.offsetWidth - 2,
        layer = new Element("div", {
            styles: {
                backgroundImage: "url(" + img.src + ")"        
            }
           }).replaces(img);
        function set(x) {
            layer.setStyle("width", (x - 1).limit(0, maxWidth));
        }
        function start (e) {
            move(e);
            body.addEvents({
                mousemove: move,
                mouseup: stop,
                touchmove: move,
                touchend: stop             
            });
        }
        function move (e) {
            set(e.page.x - left - 1);
        }
        function stop () {
            body.removeEvent("mousemove", move);
            body.removeEvent("mouseup", stop);
            body.removeEvent("touchmove", move);
            body.removeEvent("touchend", stop);
        }
        dif.addEvents({
            mousedown: start,
            touchstart: start        
        });
});