A Pen by Rplus.

beforeAfter-image-compare.markdown

beforeAfter image compare

*goal: vertical/ horizontal / all-degrees comparimg 2 images

**unfinished: wait for fixing the transform-origin in big degree... orz

A Pen by Rplus on CodePen.

License.

index.html

<div class="comparebox"></div>

script.js

'use strict'

var comparebox = {
    ele_box: document.querySelectorAll('.comparebox')[0],

    imgBox: ['img-box-r', 'img-box-l'],

    init: function() {
        var _this = this,
            _box = _this.ele_box;

        // init elements
        _box.innerHTML = '<div class="' + _this.imgBox[0] + '"></div><div class="' + _this.imgBox[1] + '"></div><span></span>';

        // add eles to comparebox
        _this.imgLeft = _box.getElementsByTagName('div')[1];
        _this.ctrl = _box.getElementsByTagName('span')[0];

        _this.bind();
    },
    bind: function() {
        var _this = this,
            _box  = _this.ele_box,
            _boxHh = _box.offsetHeight / 2,
            _ctrl = _this.ctrl,
            _xyRatio = (function() {
                var allStyle = window.getComputedStyle(_ctrl, null),
                    transformStyle = allStyle.getPropertyValue('-webkit-transform') ||
                                    allStyle.getPropertyValue('-moz-transform') ||
                                    allStyle.getPropertyValue('-ms-transform') ||
                                    allStyle.getPropertyValue('-o-transform') ||
                                    allStyle.getPropertyValue('transform');
                    return transformStyle ? transformStyle.split(',')[2] * 1 : 0; // tan(x): x:y radio
            })();

        _this.ele_box.addEventListener('mousemove', function (event) {
            var pos_x = event.clientX - _box.offsetLeft,
                pos_y = event.clientY - _box.offsetTop - _boxHh,
                op_x;

                op_x  = pos_x - Math.round(pos_y * _xyRatio) + 'px';

            _this.imgLeft.style.width = op_x;
            _this.ctrl.style.left = op_x;

        })
    }
};

comparebox.init();

style.scss

@import "compass";
// .compare > .img-box-r + img-box-l

    // configs:
    $imgs: "http://blog.codepen.io/wp-content/uploads/2012/06/Black-Small.png"
           "http://blog.codepen.io/wp-content/uploads/2012/06/White-Small.png";
    $boxW: 300px;
    $boxH: 150px;
    $ctrlW: 10px;
    $compDeg: 30;

    // color
    $img-box-bgc: rgba(red, .1) rgba(red, .3);
    $ctrl-bgc: rgba(red, .3);


    $compDeg_s: #{$compDeg}deg;

    @mixin prefix($prop, $val, $val2:null) {
        @each $browser in moz, o, webkit, ms {
          -#{$browser}-#{$prop}: $val $val2;
        }
        #{$prop}: $val;
    }

    @mixin skewX($val) {
        @include prefix( transform, skewX($val) );
    }

    @mixin transform-origin($valX, $valY) {
        @include prefix( transform-origin, $valX, $valY );
    }

    @mixin background-size($valX, $valY) {
        @include prefix( background-size, $valX, $valY );
    }

    %box2D {
        width: $boxW;
        height: $boxH;
    }

    %imgbox {
        @extend %box2D;
        position: absolute;
        overflow: hidden;

        @if $compDeg != 0 {
            @include skewX($compDeg_s);
            @include transform-origin(0, 50%);
        }
    }

    %img {
        width: $boxW;
        height: $boxH;
        content: '';
        position: absolute;
        background-repeat: no-repeat;

        @if $compDeg != 0 {
            @include skewX(-$compDeg_s);
        }

        @include background-size( $boxW, $boxH );
    }

.comparebox {
    @extend %box2D;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    cursor: col-resize;
    background-color: rgba(red, .15); // @debug

    .img-box-r {
        @extend %imgbox;
        background-color: nth($img-box-bgc, 1);
        &:after {
            @extend %img;
            background-image: url(nth($imgs, 1));
        }
    }

    .img-box-l {
        @extend %imgbox;
        background-color: nth($img-box-bgc, 2);
        &:after {
            @extend %img;
            background-image: url(nth($imgs, 2));
        }

        width: $boxW / 2; // @init
    }

    span {
        position: absolute;
        height: $boxH;

        @if $ctrlW != 0 {
            width: $ctrlW;
            margin-left: -$ctrlW / 2;
        }

        @if $compDeg != 0 {
            @include skewX($compDeg_s);
        }

        background-color: $ctrl-bgc; // @debug

        left: $boxW / 2; // @init
    }

}