Parallax & Scrolling Effects – Steady as she goes [updated]

I can still remember the day I first saw the parallax scrolling effect on Nike Better World. Wow! A fairly straight-forward jQuery effect created a most striking visual effect. Since then I have seen a couple dozen other parallax scrolling sites, but often failing to reach that level. While cool effects will always have a wave of spin-offs, I think parallax is one we need to be careful with.

In all the parallax sites I’ve seen I don’t think I’ve yet seen two for competing brands. There is definitely room for a few more. As web designers and developers we are the canaries in this mine shaft, but the target audiences of these respective sites still may be new to this fresh visual effect.

I’m definitely not saying we should stop using scrolling effects! I think we need to just push the boundaries and make new reasons for it, create new scrolling types. Sites like Ben the Bodyguard, and my colleague Andy Patrick‘s personal site use scrolling amazingly to tell a story. Nike also pushed the envelope again with their latest Air Jordan site. I’ve (perhaps hypocritically!) added a slight parallax effect on my front page as I feel it’s a subtle nuance rather than the “main-event”.

I love parallax, and don’t want the effect to be ruined for me! Having it on every one-off website will make the novelty seem gimmicky. Scrolling effects should add to the pain, not be the reason it was built.

Steady as she goes.

UPDATE: I’m not sure if I agree with me entirely… I see a lot of parallax in videos every day, and it looks fine. Perhaps the thing that is most jarring about this and other scroll effects is that they are responsive to your scrolling input.

I’m used to scrolling while focusing on page content, but adding a visual effect that is triggered when I scroll rips my attention away from that content. By contrast, in videos parallax often happens without distracting me from the content, but it happens passively and subtly in the background – not as a direct reaction to something I’m doing.

Maybe what we really need to do is replace scroll effects with passive parallax? Not sure if that makes sense either, but I’m happy to ramble incoherently.