The idea of parallax is to put an image as the background of your page, whose view changes by moving the mouse. In fact, the mouse pointer acts like a camera, which sees the image from different points of view. It is interesting and has been used many times in web templates. See the demo and enjoy!
HTML
<!-- This script got from www.devanswer.com -->
<div id="parallax"><h1>Parallax</h1></div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
body{
margin: 0;
background-color: #1d1e22;
}
#parallax {
position: relative;
width: 100%;
height: 100vh;
background-image: url(http://devanswer.com/codes/files/depth-3.png), url(http://devanswer.com/codes/files/depth-2.png), url(http://devanswer.com/codes/files/depth-1.png);
background-repeat: no-repeat;
background-position: center;
background-position: 50% 50%;
}
h1 {
position: absolute;
top: 47%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-family: "Arial";
text-transform: uppercase;
opacity: .2;
font-size: 70px;
}Javascript
(function () {
// Add event listener
document.addEventListener("mousemove", parallax);
const elem = document.querySelector("#parallax");
// Magic happens here
function parallax(e) {
let _w = window.innerWidth / 2;
let _h = window.innerHeight / 2;
let _mouseX = e.clientX;
let _mouseY = e.clientY;
let _depth1 = `${50 - (_mouseX - _w) * 0.01}% ${50 - (_mouseY - _h) * 0.01}%`;
let _depth2 = `${50 - (_mouseX - _w) * 0.02}% ${50 - (_mouseY - _h) * 0.02}%`;
let _depth3 = `${50 - (_mouseX - _w) * 0.06}% ${50 - (_mouseY - _h) * 0.06}%`;
let x = `${_depth3}, ${_depth2}, ${_depth1}`;
console.log(x);
elem.style.backgroundPosition = x;
}
})();
