CSS clip demo

by eliranmal

HTML

<input type="range" min="0" max="100" id="slider-h" value="0" />
<input type="range" min="-100" max="0" id="slider-v" value="0" />

<div id="underlay"></div>

<img src="http://placekitten.com/500/207" id="image" />

CSS

#slider-h,
#slider-v,
#image,
#underlay {
    /* absolute positioning is mandatory for clipped elements (#image) */
    position: absolute;
}
#slider-h,
#image,
#underlay {
    width: 500px;
    left: 100px;
}
#slider-h {
    top: 50px;
}
#slider-v {
    top: 192px;
    left: -50px;
    width: 207px;
    -moz-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -o-transform: rotate(270deg); 
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}
#image,
#underlay {
    top: 100px;
    height: 207px;
}
#image {
    /* initial clip state */
}
#underlay {
    background-color: #4C76A5;
}

JavaScript

var img = document.getElementById('image');
var sldH = document.getElementById('slider-h');
var sldV = document.getElementById('slider-v');

// attach change handlers to the sliders
sldH.addEventListener('change', changeHandler);
sldV.addEventListener('change', changeHandler);

function changeHandler(e) {
    
    var isHorizontal = e.srcElement.id == 'slider-h';
        
    // get the sliders values
    var valH = sldH.value;
    var valV = sldV.value;

    // calculate the percentage to pass an absolute length value 
    // to the clip property and determine the static value
    var leftVal = calcPerc(img.width, valH);
    var topVal = -1 * calcPerc(img.height, valV);
    var clipVal = getClipVal(topVal, leftVal);

    // set the images' right offset clip accordingly
    img.style.clip = clipVal;
}

function calcPerc(range, val) {
    return range / 100 * val;
}

function getClipVal(top, left) {
    return 'rect(' + top + 'px, auto, auto, ' + left + 'px)';
}