A super easy way to add parallax effects to your project using the Rellax JavaScript library.
First, install the Rellax.js library: npm install rellax --save
Import it (usually in main.js):
import Rellax from "rellax";
let rellax = new Rellax(".rellax", {
speed: 4,
center: true
});
Add the rellax class to any element:
<div class="rellax">
I’m slow and smooth
</div>
And optionally play around with the speed:
<div class="rellax" data-rellax-speed="-3">
I’m slow and smooth
</div>
<div class="rellax" data-rellax-speed="7">
I’m super fast!!
</div>
<div class="rellax" data-rellax-speed="-5">
I’m extra slow and smooth
</div>
These examples were taken straight from their documentation. Check it out to learn more about the options.