Parallax website. Two words that send a shiver down my spine every time they are uttered. As someone who’s always worked in ‘Ad Land’ I was there when that Nike website came on the scene in 2011 and sent the industry completely mad for ‘parallax scrolling’. Since then we’ve all seen our fair share of janky attempts at creating this effect. I was somewhat reluctant to write about this subject as there has already been a lot said by people far more knowledgable than myself, but when I spoke at Converge last month and talked about scrolling animations I got a lot of follow up questions from people. It seems that this is still a challenge that a lot of front end developers struggle with.
Disclaimer: I am not in any way advocating that people start/keep building parallax scrolling websites, so please don’t call the web design police on me! I just figure if our clients are going to keep asking for it, we may as well do it in a way that isn't terrible.
So, I want to talk about the top 2 ways people can go wrong with moving elements on scroll.
- Updating the position of elements on the scroll event
- Updating properties of elements that cause repaint/reflow
Consider the following code
This creates a couple of problems. First, because we’re updating the left property of square 1 and 2, we’re triggering a layout and a paint (expensive operations) every time the event fires. Secondly, the scroll event can fire several times within milliseconds. If you are using this method for a lot of elements you can actually overload the thread and lock up the browser’s scroll.
A better way:
- Only update the position of elements using CSS3 transforms.
- Put repositioning logic in a requestAnimationFrame render loop.
Why should we do it this way? First - updating the transform property of elements is a ‘cheap’ operation, as in it requires less processing, and the chance of it causing lag is reduced. Secondly, by making our updates in a requestAnimationFrame loop, the rendering ‘work’ for each frame will be optimized by the browser, providing the smoothest animation possible.
In 2012 I went to a concert back in Australia called NKOTBSB. It was The New Kids on The Block on stage with The Backstreet Boys. Donny Wahlberg did a flip and then tore his shirt off. It was one of the greatest nights of my life. I made a 'scrolling website' to commemorate the evening and also show you this method in action. See full page
Personally, I’m not really in to the ‘moving things at a linear rate as the page scrolls down’ look. For one, linear movement makes me sad. It also looks kind of choppy if you’re scrolling at random speeds. So instead I like to use linear interpolation to move elements to their target. I think this is one of those effects that are down to personal preference, but I definitely think it makes things look a lot smoother and better. See full page.
Another (very naughty) way.
So if you're on a retina screen like me you will see some jittery movement in the pen above. This is a result of the browser updating the native scroll position while shifting elements based on that position. There is a way you can smooth this out completely but it involves completely jacking the scroll (dun dun dun)
- Remove native scrolling all together
- Listen to the mouse wheel / trackpad scroll event and translate your container in a way that mimics regular scrolling. Although the end result is buttery, there are concerns such as losing your native scroll bar completely - and the need to fix your scroll speed for different browsers and systems (the speed reported in the scroll event differs, depending on your trackpad/mouse + browser!). I am not going to do a demo of this for you because then the police really will come and put me in web design jail. And then I wouldn't be able to write any more blogs on CodePen.
I really do want to blog more on the old CodePen so if you guys have anything you want me to write about or have any questions please comment below, send me a tweet @rachsmithtweets or flick me an email at contact at rachsmith dot com.