Using Rellax JS for Vertical Scroll Animations
Rellax is a lightweight, vanilla JavaScript library for adding vertical scroll animation to your site. Parallax scrolling, when done right, can really set your website apart and make it memorable to visitors.
Compared to other JavaScript animation libraries, Rellax is not only lightweight, but extremely easy to set up and configure.
It can be installed with NPM:
Or
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.
Initiate Rellax in whatever JavaScript file is connected to the page you want to animate with:
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
The 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 data-rellax-speed="1".
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 data-rellax-percentage="":
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.
Wrapping Up
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.