DEV Community

Cover image for Reusable Parallax Effect With CSS Variables
Sarmun Bustillo
Sarmun Bustillo

Posted on

Reusable Parallax Effect With CSS Variables

CSS variables offers us a very neat way to share information between CSS and JavaScript. The perk of connecting these two with CSS variables is that we can access them and modify them in CSS and in JS at any time.

I am using the parallax effect as an example, but there are so many things this could be used for. The parallax effect in a nutshell is where the background of a website scrolls at a slower pace than the whatever is on foreground. Let's build a one, but one that can be easily extended.

We will use this cards for our example.

cards

Let's first take care of the CSS part.

.card {
    --translate-y: 0px;
    --translate-x: 0px;
    transform: translate(var(--translate-x), var(--translate-y));

}
Enter fullscreen mode Exit fullscreen mode

So, we created two CSS variables for horizontal and vertical movement and we set them to our desired element. Let's move on to JavaScript.

Creating the function

For our function we will need some parameters: the element, the direction to be translated, either horizontal or vertical, the speed, and if the value to be translated is a negative number.

parallax = (element, direction, speed, negative) => {}
Enter fullscreen mode Exit fullscreen mode

The amount to be translated depends on how much the page has been scrolled. We can access this amount in the window's pageYOffset, but to make it look smoother and slower we need to reduce this amount a bit and here is where our speed comes into play. It is also a good place to use our negative parameter and decide whether it is a negative number or not.

let translate = window.pageYOffset * speed * (negative ? -1 : 1);
Enter fullscreen mode Exit fullscreen mode

Then we only need to update our CSS variable to our desired direction and our computed amount.

element.style.setProperty(`--translate-${direction}`, `${translate}px`);
Enter fullscreen mode Exit fullscreen mode

But what if we also want to use this function on more than one element at the same time?

parallax = (element, direction , speed , negative) => {
    let translate = window.pageYOffset * speed * (negative ? -1 : 1);

    if (element.length > 1) {
        element.forEach((el) => {
            el.style.setProperty(`--translate-${direction}`, `${translate}px`);
        });
    } else {
        element.style.setProperty(`--translate-${direction}`, `${translate}px`);
    }
};
Enter fullscreen mode Exit fullscreen mode

Lastly we only need to listen when the page gets scrolled and call our function.

const firstCard = document.querySelector('.cards-parallax .card');
const lastCard = document.querySelector('.cards-parallax .card:last-of-type');
const cards = document.querySelectorAll('.cards-parallax .card');
window.addEventListener('scroll', () => {
    parallax(firstCard,'y', 0.4, true);
    parallax(lastCard,'x', 0.5, false);
    parallax(cards,'x', 0.2, false);

});
Enter fullscreen mode Exit fullscreen mode

The cool thing is that you could follow the same technique for many other properties like scale, rotate, opacity even colors and may more.

Here is a Demo

Discussion (2)

Collapse
zyabxwcd profile image
Akash • Edited on

wow. it was nicely broken into parts to explain it as easily as possible. you are great. I initially thought that creating such an effect using plain JS looks complicated but not so after I finished reading your article. and yes, really cool dp. the background is so good

Collapse
sarmunbustillo profile image
Sarmun Bustillo Author

I'm glad you liked it!