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.

Let's first take care of the CSS part.

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

}

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) => {}

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);

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

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

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`);
    }
};

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);

});

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

Comments

[Akash]

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

[Sarmun Bustillo]

I'm glad you liked it!