How to add different scroll speeds to HTML elements?

Question

I am trying to replicate an effect in which, when the user scrolls, the objects scroll at a slower speed giving a parallax effect. A perfect example of what I'm trying to make is at this website (https://universe.openai.com). Although it is sometimes hard to tell, you can see the parallax effect.

I tried adding:

$(window).scroll(function () {

   $('*').css({
      'top' : ($(this).scrollTop()/40)+"px"
   });

});

but it was very choppy, especially on Chrome, and even when I use animate() instead of css().

---

I tried using the StellarJS but there were a lot of glitches and choppy animations.

This was my code for StellarJS (I tried $.stellar() too but it was still choppy):

$.stellar({
        horizontalScrolling: false,
        verticalOffset: 0,
        horizontalOffset: 0
});

and the HTML part being (I played with the ratio a lot, still no change):

data-stellar-ratio="2"

---

Any other solutions or maybe a clarification for StellarJS? All answers or comments are appreciated!

Thank you.