*goal: vertical/ horizontal / all-degrees comparimg 2 images
**unfinished: wait for fixing the transform-origin in big degree... orz
<div class="comparebox"></div> |
'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(); |
@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 | |
} | |
} |