Parallax Scrolling on the Web

While I’ve built one or two myself, I think parallax scrolling websites can, at times, be excessive. In the rare occasion where the effect is an appropriate fit, it can add a nice touch of natural perspective to a site.

Parallax Example

In the above GIF, I mounted a camera on a tripod and snapped shots at regular intervals as I raised and lowered the arm. Things in the foreground move up & down faster and further than things in the background. Also, things only shift on the axis being traveled—nothing shifts left & right along the x-axis if the y-axis is the one being traveled.

That’s why I think using vertical scroll to trigger horizontal motion can feel jarring and unnatural. Similar effects, like slowing the pace of a scroll or using it to load, rotate, or animate objects, can feel clunky and disorienting. There are surely exceptions, but assuming these effects make a site more engaging might be unsafe. I actually feel less engaged when scroll behavior is unexpected or hijacked. Like a car’s steering, even subtle changes in responsiveness will leave the driver unsure and less focused on what’s in front of them. 

We should also keep in mind that extra browser/device testing is necessary. Some implementations can harm performance and won’t work well in touch environments. Parallax sites can be great fun, but please, implement with care. 

Oh, and hat tip to Sega’s 1988 smash, Altered Beast, for showing us all how cool parallax is in the first place.

10 Responses

Leave a comment or contact me via Twitter @TrentWalton

Leave a Reply