JSFiddle - React, Tailwind, and code Playground

by csaltyj

HTML

<div id="window">
    <div id="wall">
    </div>
</div>

CSS

#window {
    width: 400px;
    height: 300px;
    overflow: hidden;
    margin: 1em;
}

#wall {
    position: relative;
    width: 860px;
    height: 926px;
    background: #000;
}

.box {
    float: left;
    border: 1px solid #000;
    width: 100px;
    height: 100px;
    background: #999;
}

JavaScript

/* Scrolling wall */

ratioX = $('#window').width() / ($('#wall').width() - $('#window').width());
ratioY = $('#window').height() / ($('#wall').height() - $('#window').height());

for (i = 0; i< 60; ++ i)
    $('<div class="box"></div>').appendTo('#wall');

$('#window').on('mousemove', function(e) {
    dX = (e.pageX - $(this).offset().left) / ratioX *-1;
    dY = (e.pageY - $(this).offset().top) / ratioY *-1;
    
    $('#wall').css({
        left: dX + 'px',
        top: dY + 'px'
    });
});