I have a Three js animation in the body of the document:
container = document.createElement( 'div' );
document.body.appendChild( container );
There are two overlaying divs set with the following styles:
#holder {
z-index: 1;
position: absolute;
top: 0px;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
}
#sitearea {
width: 1000px;
margin: 0 auto;
}
In addition, there is a media query included:
@media screen and (max-width: 1000px) {
#sitearea {
width: 100%;
}
}
The animation can be interacted with using the following events:
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
On desktop, the animation reacts to mouse movements, while on mobile it responds to touch.
It is possible to scroll the holder div down on desktop to reveal more text without moving the background animation.
Unfortunately, the holder div does not respond to touch on mobile devices, preventing the ability to slide up any additional text.