0

I've been working on a parallax skrollr wrapped in a coda slider now for a while but I'm finding that I've got an issue with the transitioning. Every time you scroll the elements in the skrollr boddy flicker and jump. I've read every single thread and post about this with no straight answer how to fix it. I'm really at my whits end.

I've been using a absolute position for the elements, and made the skrollr body an absolute position as well with no luck.

As well as I've set the smooth scroll to false since the tweening between frames was also very distracting.

Has anyone had this problem?

here's the link to the site as it stands now http://www.littleluxury.co.za Both mobile and desktop shudder on scroll.

If someone can enlighten me why the examples I've seen are smooth and seemless while mine looks like this I'd greatly appreciate it.

Neil Bothma
  • 1
  • 1
  • 2
  • Post the code you're using so we can try and fix it or create a fiddle – man Dec 23 '13 at 15:29
  • It's massive amount of code to post - , I've tried it on firefox and it's smooth as silk, it seems it a chrome and a safari problem. It might be a zooming problem on some further investigation. – Neil Bothma Dec 23 '13 at 15:45

3 Answers3

4

You scroll down -> the elements move up because they're in the document flow -> skrollr's next animation loop kicks in (some ms later) -> it moves the elements to a different position because of your animation

I suggest positioning the elements fixed and using translate() to move them.

Prinzhorn
  • 22,120
  • 7
  • 61
  • 65
3

add this to the Div 

 <div data-smooth-scrolling="off">

it should be better afterwards

sabatino
  • 74
  • 4
  • I added it to independent elements as well as the #skrollr-body and still experience the jitter in chrome, I usually have the setting smoothScroll: false, in the skrollr intialiase just before the

    tag. This is just to get rid of the tweening between transitions. The real problem is the jumping that happens in chrome and safari. Like I said before Firefox has no problems displaying this skrollr perfectly. It has to be something that both safari and chrome are interpreting wrong.

     – Neil Bothma Dec 23 '13 at 18:46
  • It works on chrome and safari, but not works on Firefox. is there any hacks? – BadJohnny Jun 25 '20 at 11:40
2

YEs! I've been looking for the answer for a few days now, and background-attachment:fixed is the answer! It takes a tiny bit of tweaking afterwards to make it scroll in the right direction, but it's not a big deal.

See http://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website for a nice, detailed tutorial which scrolls smoothly and uses the fixed background technique.

Adrian Pauly
  • 147
  • 1
  • 7