About
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.
- scrolling down while background goes up
- etc …
Articles Related
Type
Scrolling
Parallax scrolling is a technique where background images move slower than foreground images when scrolling
- Demo:
- Library:
- Split page scroll (scrolling left down, right up)
- Deprecated:
Scene with multiple layers
Moving Layers
Moving layers based on mouse event
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
- The scene defined as image of same dimensions
<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>
- The library
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/parallax.min.js" integrity="sha256-v00gso3ox/d0KLJDJew6+zm29+J39rYWZvOgoXzDtCs=" crossorigin="anonymous"></script>
- The starting of the process
var scene = document.getElementById('scene');
var parallax = new Parallax(scene);
- The result will show pentagon that will follow your mouse.