A parallax is an illusion of depth.
It's based on the difference of movement between objects based on the fact that things that are closer to us move faster, things that are further away move slower.
Parallax scrolling is a technique where background images move slower than foreground images when scrolling
With the parallax-js library, you an create layers of a image that will parallax to the location of your mouse (ie respond, translate their position to the other direction by a depth factor)
Adapted from the simple example. The library react also to gesture thanks to hammer
<div id="scene" class="scene ">
<div data-depth="1.00"><img src="/_media/web/ui/layer1.png"></div>
<div data-depth="0.80"><img src="/_media/web/ui/layer2.png"></div>
<div data-depth="0.60"><img src="/_media/web/ui/layer3.png"></div>
<div data-depth="0.40"><img src="/_media/web/ui/layer4.png"></div>
<div data-depth="0.20"><img src="/_media/web/ui/layer5.png"></div>
<div data-depth="0.00"><img src="/_media/web/ui/layer6.png"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/parallax.min.js" integrity="sha256-v00gso3ox/d0KLJDJew6+zm29+J39rYWZvOgoXzDtCs=" crossorigin="anonymous"></script>
var scene = document.getElementById('scene');
var parallax = new Parallax(scene);