0

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.

John Doe
  • 305
  • 1
  • 2
  • 10
  • the site in question uses jquery lazyload (https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js) See https://github.com/tuupola/jquery_lazyload for details. I don't really see any "parallax" effect, it's just a long website with slow-loading images. – Rachel Gallen May 10 '17 at 00:47
  • @RachelGallen in any case, i need a parallax effect on the elements. It looked like that site had it to me but either way, i still need that. – John Doe May 10 '17 at 00:54
  • look up how to implement parallax then. It's not that difficult! – Rachel Gallen May 10 '17 at 01:21
  • @RachelGallen i did. ParallaxJS itself is not what im looking for. The same team that made ParallaxJS also made StellarJS, which is what im looking for. But then again, im having problems with that. – John Doe May 10 '17 at 01:22
  • You can achieve the effect without parallax js https://ihatetomatoes.net/simple-parallax-scrolling-tutorial/ https://1stwebdesigner.com/parallax-scrolling-tutorial/ there's more... – Rachel Gallen May 10 '17 at 01:26
  • @RachelGallen Unfortunately still not what I'm looking for. Thanks though – John Doe May 10 '17 at 01:53

0 Answers0