Scale Scroll 3

Scale transform with scrolling container, with javascript scroll behaviour

by abhitalks

HTML

<label for="slider1">Scale: </label>
<input id="slider1" type="range" min="0.5" max="3" value="1" step="0.25" list="datalist" onchange="scaleValue.value=value" />
<output for="slider1" id="scaleValue">1</output>
<datalist id="datalist">
	<option>0.5</option>
	<option>0.75</option>
	<option>1</option>
    <option>1.5</option>
    <option>2</option>
    <option>3</option>
</datalist>
<hr>
<div id="container">
    <div id="wrapper" class="wrapper">
        <div id="box" class="box">
            <div class="inner"></div>
        </div>
    </div>
</div>

CSS

* { box-sizing: border-box; }
#container {
    position: relative;
    border: 1px solid red;
    width: 400px; height: 300px;
    background-color: blue;
    overflow: scroll;
}
.wrapper {
    position: absolute; 
    background-color: transparent; border: 2px solid black;
    width: 300px; height: 200px;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%); 
    transition: all 0.5s;
}
.box {
    width: 300px; height: 200px;
    background: linear-gradient(to right, red, white);
    border: 2px solid yellow;
    transform-origin: top left;
    transition: all 0.5s;
}
.inner {
    width:50px; height: 50px;
    background-color: green; 
}

JavaScript

var $container = $("#container"), 
    $wrap = $("#wrapper"), 
    $elem = $("#box"), 
    originalWidth = 300, originalHeight = 200;

$("input").on("click", function() {
    var factor = +(this.value);
    scaler(factor);
});

function scaler(factor) {
    var newWidth = originalWidth * factor,
        newHeight = originalHeight * factor;
    $wrap.width(newWidth); $wrap.height(newHeight);
    if (factor > 1) {
        $wrap.css({
            left: 0, top: 0, 
            transform: 'translate(0,0)'
        }); 
        $elem.css({
            transform: 'scale(' + factor + ')'
        }); 
        setTimeout(setScroll, 400);
    } else {
        $elem.css({
            transform: 'scale(' + factor + ') ' 
        });        
        $wrap.css({
            left: '50%', top: '50%', 
            transform: 'translate(-50%, -50%)'
        });
    }
}

function setScroll() {
    var horizontal, vertical;
    horizontal = ($wrap.width() - $container.width()) / 2;
    vertical = ($wrap.height() - $container.height()) / 2;
    $container.stop().animate({scrollTop: vertical, scrollLeft: horizontal}, 500);
}