Using Rellax JS for Vertical Scroll Animations
It can be installed with NPM:
You can download and insert the
rellax.min.js directly into your project. That can be found at the Rellax github repo.
Setting up the animations
After you have the code installed, you're ready to start animating different parts of your webpage. This is as simple as initiating Rellax and adding a class name to the element you want to animate.
Then set the class
rellax on the HTML element you want to animate:
This will animate the container and all its child elements at the default rellax speed.
Changing the Animation Speed
data-rellax-speed="" attribute can be added to any element using Rellax to control the speed. The speed ranges from -10 to 10. Negative numbers mean the element will be delayed relative to the scrolling of the page and positive numbers mean the element will be sped up relative to the scrolling of the page.
Note that the default speed is set at -2.
Here you can see an example from my personal site, where the hero text container div is set to
data-rellax-speed="-1", and the large phone/tablet SVG on the right is set to
Adjusting Z-Index and and Centering an animation
You can also use the attribute
data-rellax-zindex="" to control the three dimensional flow of elements, along with setting the scroll speed relative to the view port width:
Centering an animation to the view-port can be done globally or on an individual element. If you want to center all animations globaly, simply set
center:true in your script file like this:
If you'd like a little more control over which elements are centered, you can set the centering directly on the containing element just like setting the speed using
This allows you to fine-tune control over how animations are displayed on different devices and even show different looking animations depending on screen size. Combined with the
data-rellax-zindex="" setting, the possibilities are endless.
This post should be a good guide to getting you started with Rellax and customizing your animations. Rellax is easy to learn but offers a great amount of control without sacrificing speed. It's an animation library that I would recommend everyone check out, whether looking to set up landing page animations, or just want to mess around on a side project.
For more details and advanced customization, check out the official Rellax github repo.