JSFiddle - React, Tailwind, and code Playground
HTML
<div id="pageBg">
<div id="pageInner"></div>
</div>
CSS
#pageBg {
background: url('http://placekitten.com/2000/2000') no-repeat 0 0 fixed;
height: auto;
left: 0;
min-height: 768px;
min-width: 500px;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
#pageInner {
top: 10%;
left: 10%;
right: 10%;
bottom: 10%;
position: fixed;
}
JavaScript
var doEvery;
doEvery = function(time, fn) {
return setInterval(fn, time);
};
$(function() {
var scroll, scrollSpeed, timer, turnOffScroller, turnOnScroller, xInc, xPerc, yInc, yPerc;
scrollSpeed = 0.4;
xPerc = 0.1;
yPerc = 0.1;
xInc = 0;
yInc = 0;
timer = null;
scroll = function(x, y) {
var _ref, _ref1;
if ((0 < (_ref = xPerc + xInc) && _ref < 100)) {
xPerc += xInc;
}
if ((0 < (_ref1 = yPerc + yInc) && _ref1 < 100)) {
yPerc += yInc;
}
$('#pageBg').css('background-position-x', xPerc + '%');
return $('#pageBg').css('background-position-y', yPerc + '%');
};
turnOnScroller = function() {
$('#pageBg').on('mousemove', function(e) {
var mousePosX, mousePosY;
mousePosX = (e.pageX / $(window).width()) * 100;
mousePosY = (e.pageY / $(window).height()) * 100;
if (!((10 < mousePosX && mousePosX < 90))) {
xInc = mousePosX > 90 ? (mousePosX - 90) * scrollSpeed : (mousePosX - 10) * scrollSpeed;
} else {
xInc = 0;
}
if (!((10 < mousePosY && mousePosY < 90))) {
return yInc = mousePosY > 90 ? (mousePosY - 90) * scrollSpeed : (mousePosY - 10) * scrollSpeed;
} else {
return yInc = 0;
}
});
return timer = doEvery(25, function() {
return scroll();
});
};
turnOffScroller = function() {
$('#pageBg').off('mouseover');
return clearInterval(timer);
};
$('#pageInner').on('mouseleave', function() {
return turnOnScroller();
});
return $('#pageInner').on('mouseenter', function() {
return turnOffScroller();
});
});