"before and after" Interactive image mask

I'd like to recreate the before and after image slider recently featured on the guardian.co.uk, using web-kit.

http://www.guardian.co.uk/uk/interactive/2011/aug/09/london-riots-before-after-photographs

It's basically two images on top of each other with a vertical slider that follows the mouse, revealing one image on the left and the开发者_如何学C other on the right.

I've come up with an example here. It will need expanding a little, but it shows the basic principles. This doesn't use CSS3 stuff so, while not gaining GeekPoints(tm) for using CSS3, it'll work in loads more browsers.

HTML

<div class="reveal">
    <div>
        <span></span>
    </div>
</div>

jQuery

var handle = $("div.reveal div span");

$(document).ready(function() {
    handle.mousedown(function() {
        $(this).data("sliding", true);
    });
    handle.mouseup(function() {
        $(this).data("sliding", false);
    });
});

$(document).mousemove(function(e) {
    var img = $("div.reveal div");

    if(handle.data("sliding"))
    {
        var offs = e.pageX - img.offset().left
        img.width(offs);
    }
});

here's a plugin http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/

Here's the code taken straight from the guardian page:

ImageSlider = function (n, i, t) {
    var e = {};
    e.init = function () {
        e.container = n;
        e.beforeUrl = i;
        e.afterUrl = t;
        e.width = e.container.width();
        e.height = e.container.height();
        e.renderHtml();
        e.loadImages()
    };
    e.renderHtml = function () {
        var i = document.createDocumentFragment(),
            n = document.createElement("div");
        n.className = "imageMask";
        n.style.position = "absolute";
        n.style.overflow = "hidden";
        n.style.width = e.width + "px";
        n.style.height = e.height + "px";
        n.style.webkitBackfaceVisibility = "hidden";
        var y = document.createElement("div");
        y.style.position = "absolute";
        y.style.webkitBackfaceVisibility = "hidden";
        y.id = "before";
        var r = document.createElement("div");
        r.style.position = "absolute";
        r.style.webkitBackfaceVisibility = "hidden";
        r.id = "after";
        var w = document.createElement("div");
        w.className = "slider";
        w.style.position = "absolute";
        w.style.webkitBackfaceVisibility = "hidden";
        var t = document.createElement("div");
        t.style.left = "-2px";
        t.style.width = "4px";
        t.style.position = "absolute";
        t.style.height = e.height + "px";
        t.style.backgroundColor = "#FFF";
        t.style.boxShadow = "0 0 10px rgba(0, 0, 0, 1)";
        t.style.webkitBoxShadow = "0 0 10px rgba(0, 0, 0, 1)";
        t.style.MozBoxShadow = "0 0 10px rgba(0, 0, 0, 1)";
        var F = document.createElement("div");
        F.style.position = "absolute";
        F.style.width = e.width + "px";
        F.style.height = e.height + "px";
        n.appendChild(r);
        w.appendChild(t);
        i.appendChild(y);
        i.appendChild(n);
        i.appendChild(w);
        i.appendChild(F);
        e.container[0].style.position = "relative";
        e.container[0].style.overflow = "hidden";
        e.container.append(i.cloneNode(!0));
        e.preloader = e.container.children(".preloader");
        e.preloader[0].style.position = "absolute";
        e.preloader[0].style.top = (e.height - e.preloader.css("height").replace("px", "")) * 0.5 + "px";
        e.preloader[0].style.left = (e.width - e.preloader.css("width").replace("px", "")) * 0.5 + "px";
        e.handle = e.container.children(".slider");
        e.handleDisplay = e.handle.children();
        e.handleDisplay.hide();
        e.mask = e.container.children(".imageMask");
        e.before = e.container.children("#before");
        e.after = e.mask.children("#after")
    };
    e.loadImages = function () {
        e.imagesToLoad = 0;
        e.imagesLoaded = 0;
        e.loadImage(e.before, e.beforeUrl);
        e.loadImage(e.after, e.afterUrl)
    };
    e.loadImage = function (i, n) {
        e.imagesToLoad++;
        var t = new Image;
        $(t).load(function () {
            $(this).hide();
            $(i).removeClass("loading").append(this);
            e.imageLoaded()
        }).error(function () {}).attr("src", n)
    };
    e.imageLoaded = function () {
        e.imagesLoaded++;
        e.imagesLoaded >= e.imagesToLoad && e.allReady()
    };
    e.allReady = function () {
        e.setPosition(0, !0);
        e.before.children().fadeIn(500);
        e.after.children().fadeIn(500, e.finalise)
    };
    e.finalise = function () {
        e.dragging = !1;
        e.candrag = !0;
        e.lastXPos = 0;
        e.velocity = 0;
        Modernizr.touch && (document.addEventListener("touchstart", e.touchHandler, !0), document.addEventListener("touchmove", e.touchHandler, !0), document.addEventListener("touchend", e.touchHandler, !0), document.addEventListener("touchcancel", e.touchHandler, !0));
        e.container.mousedown(e.mouseDownHandler);
        e.container.mouseup(e.mouseUpHandler);
        e.container.mousemove(e.mouseMoveHandler);
        e.handleDisplay.fadeIn(250);
        e.preloader.remove();
        e.setPosition(e.width * 0.5, !1);
        Ticker.setFPS(30);
        Ticker.addListener(e)
    };
    e.tick = function () {
        if (e.dragging) e.lastXPos = e.handle.position().left;
        else if (e.velocity != 0) if (Math.abs(e.velocity) < 0.2) e.velocity = 0;
        else {
            e.velocity *= 0.9;
            var i = e.handle.position().left + e.velocity;
            if (i >= e.width) i = e.width, e.velocity = -e.velocity * 0.5;
            else if (i <= 0) i = 0, e.velocity = -e.velocity * 0.5;
            e.setPosition(i, !0)
        }
    };
    e.mouseDownHandler = function (i) {
        e.canDrag = !0;
        e.velocity = 0;
        e.setPosition(i.pageX - $(i.target).offset().left, !1);
        e.lastXPos = i.pageX - $(i.target).offset().left;
        i.preventDefault()
    };
    e.mouseUpHandler = function (i) {
        e.dragging ? (e.velocity = (e.handle.position().left - e.lastXPos) * 0.5, e.dragging = !1) : e.setPosition(i.pageX - $(i.target).offset().left, !1);
        e.canDrag = !1;
        i.preventDefault()
    };
    e.mouseMoveHandler = function (i) {
        if (e.canDrag) e.dragging = !0, e.setPosition(i.pageX - $(i.target).offset().left, !0);
        i.preventDefault()
    };
    e.setPosition = function (i, n) {
        var t = i - e.mask.width(),
            r = n ? 0 : 0.5;
        Modernizr.csstransforms && Modernizr.csstransitions ? (e.applyTransition(e.handle[0].style, "all " + r + "s ease-out 0s"), e.applyTransition(e.mask[0].style, "all " + r + "s ease-out 0s"), e.applyTransition(e.after[0].style, "all " + r + "s ease-out 0s"), / AppleWebKit\//.test(navigator.userAgent) ? (e.applyTransform(e.handle[0].style, "matrix(1,0,0,1," + i + ",0)"), e.applyTransform(e.mask[0].style, "matrix(1,0,0,1," + t + ",0)"), e.applyTransform(e.after[0].style, "matrix(1,0,0,1," + -t + ",0)")) : (e.applyTransform(e.handle[0].style, "matrix(1,0,0,1," + i + "px ,0)"), e.applyTransform(e.mask[0].style, "matrix(1,0,0,1," + t + "px ,0)"), e.applyTransform(e.after[0].style, "matrix(1,0,0,1," + -t + "px ,0)"))) : (e.mask.stop(), e.mask.animate({
            width: i
        }, r * 1E3), e.handle.stop(), e.handle.animate({
            left: i
        }, r * 1E3))
    };
    e.applyTransform = function (e, i) {
        e.transform = e.msTransform = e.OTransform = e.MozTransform = e.webkitTransform = i
    };
    e.applyTransition = function (e, i) {
        e.transition = e.msTransition = e.OTransition = e.MozTransition = e.webkitTransition = i
    };
    e.touchHandler = function (e) {
        var i = e.changedTouches[0],
            n = "";
        switch (e.type) {
        case "touchstart":
            n = "mousedown";
            break;
        case "touchmove":
            n = "mousemove";
            break;
        case "touchend":
            n = "mouseup";
            break;
        default:
            return
        }
        var r = document.createEvent("MouseEvent");
        r.initMouseEvent(n, !0, !0, window, 1, i.screenX, i.screenY, i.clientX, i.clientY, !1, !1, !1, !1, 0, null);
        i.target.dispatchEvent(r);
        e.preventDefault()
    };
    e.init();
    return {}
}

As you can see, it's quite a mess. The first argument is a jQuery object, and the second and third are before/after urls.

Just in case anybody is still looking for a solution using webkit and CSS3 -- there's a demo here. Just change to "Position". This might not work in anything but Chrome.

Funny question ...

I'd like to recreate the before and after image slider recently featured on the guardian.co.uk, using web-kit.

Why don't you use the original? There is no need for jQuery!

The Guardian is 'guardian' on github. They know how to do it and so it is OpenSource: https://github.com/guardian/image-fader-slider