Parallax

by robert_schutt

HTML

<label><input type="checkbox" id="overflowhide" onchange="$('#outer').css({'overflow': $('#overflowhide').prop('checked') ? 'hidden' : ''});"/> hide overflow</label>
<div id="outer">
    <div id="inner">
        <table border="1"><tr><td>1.1</td><td>1.2</td><td>1.3</td></tr><tr><td>2.1</td><td>2.2</td><td>2.3</td></tr><tr><td>3.1</td><td>3.2</td><td>3.3</td></tr></table>
    </div>
</div>

CSS

html, body {
    width: 100%;
    height: 100%;
}
#outer {
    position: relative;
    left: 100px;
    top: 50px;
    height: 300px;
    width: 300px;
    border: 1px solid black;
}
#inner {
    position: absolute;
}
table {
    height: 600px;
    width: 400px;
}

JavaScript

$('body').on('mousemove', function(e){
    var outer = $('#outer'),
        outerWidth = outer.width(),
        outerHeight = outer.height(),
        inner = $('#inner'),
        innerWidth = inner.width(),
        innerHeight = inner.height(),
        posOuter = outer.offset();
    $('#inner').css({
        'left': Math.min(0, Math.max(outerWidth - innerWidth, (posOuter.left - e.clientX) * (innerWidth - outerWidth) / outerWidth)) + 'px',
        'top': Math.min(0, Math.max(outerHeight - innerHeight, (posOuter.top - e.clientY) * (innerHeight - outerHeight) / outerHeight)) + 'px'
    });
});