Preview
Source Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->
<style>
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;
}
</style>
</head>
<body>
<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>
<script>
(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;
}
})();
</script>
</body>
</html>
