Web UI - Parallax


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 …



Parallax scrolling is a technique where background images move slower than foreground images when scrolling

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>
  • 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.

Powered by ComboStrap