Parallax Scrolling That Hides the Point

The home page that moves in layers

Open the site on a large monitor and the effect is striking. The photograph behind the heading drifts more slowly than the text, giving the page a sense of depth as you scroll.

Open it on a phone and something else happens. The scroll judders, or the photograph sits still and oversized, or nothing moves at all and a huge image fills the screen.

Meanwhile the sentence explaining what the business does arrives three screens down, after a slogan and two more slow-moving photographs.

The effect is called parallax scrolling. It was approved on the designer's screen, and most visitors see a different site.

What parallax scrolling is

Parallax means layers moving at different speeds as you scroll, usually a background image moving more slowly than the content in front of it.

It is built in two main ways: a background fixed in place while the page moves over it, or a script that repositions layers as you scroll.

Related effects tend to come with it: text that fades in as it scrolls into view, sections that stay pinned while others slide over them, and pages that take over the scroll so one flick moves a whole panel.

Where it goes wrong

• Stuttering on phones that cannot redraw the layers fast enough.
• Fixed backgrounds that iPhones do not support.
• The message pushed down to make room for the effect.
• Text over moving photographs, hard to read at any speed.
• Scrolling taken over by the page.
• Motion that unsettles some visitors physically.

The third does the most damage to a business site. Parallax only shows when there is room to scroll, so the page is built from tall image sections, and the information a visitor came for is spread out beneath them.

Why it stutters

A smooth scroll means the phone redraws the screen about sixty times a second, leaving roughly sixteen milliseconds for each frame.

A scripted parallax effect asks the phone to work out new positions for every layer, and repaint large images, inside that time. A designer's computer manages easily. Many phones do not, and the dropped frames show as judder.

Large background images make it worse, and so does every other script on the page competing for the same moment.

What iPhones do with fixed backgrounds

Many themes create parallax with a fixed background, an image that stays put while the page scrolls over it.

Safari on iPhones does not support fixed backgrounds in the usual way. Depending on how the theme handles that, the image scrolls normally, sits enlarged and blurred, or is swapped for something plainer.

So the effect the business paid for often does not exist on the device most of its visitors use, and sometimes leaves an awkward image in its place.

The message three screens down

A visitor deciding whether you do what they need wants the answer on the first screen: what you do, where, and how to get in touch.

Parallax layouts usually spend that space on a photograph and a slogan, because the effect needs tall sections to work.

Text that fades in as it scrolls into view adds another risk. It stays invisible until a script reveals it, and if the script fails or loads slowly, the visitor sees empty space where the words should be.

Motion that makes people unwell

For people with vestibular disorders, which affect the inner ear and the sense of balance, layers moving at different speeds can trigger dizziness, nausea or headaches.

Apple devices have a Reduce Motion setting for exactly this, and Safari already tells a website when it is switched on. A well-built site can use that to turn its effects off for those visitors.

Many parallax themes ignore it. The visitors affected simply leave, and nobody at the business ever hears why.

A worked example

A small custom home builder had a home page of four full-screen photographs of finished houses, each sliding behind a single line of text.

On the owner's desktop it looked like a magazine. On a phone, the photographs either juddered or sat oversized and still, and the sentence saying what the company built, and where, was four screens down.

The rebuild kept the best photograph at a normal height, with the headline, the area served and the phone number beside it. The other three moved down the page into a gallery.

The parallax effect was removed from phones entirely. On large screens one gentle effect remains, in a section well below the message, and it switches off for anyone with Reduce Motion turned on.

The houses are just as impressive. A visitor now knows within one screen whether this builder works in their town.

When motion helps

Motion is not the problem. Motion without a purpose is.

It helps when it explains something: a menu sliding out from the button that opened it, a form field shaking when an entry is wrong, a before-and-after slider the visitor drags.

It helps when the visitor controls it. Motion that responds to a tap feels like the site listening; motion that happens to visitors as they scroll feels like the site performing.

Keep it brief, keep it small, and never let it carry the message.

The counter-case

There are sites where the effect is part of the point.

A photographer, an architect or a design studio selling visual craft may reasonably use motion as part of the work on show, provided the contact details and essentials do not depend on it.

A single subtle effect on large screens, well away from the message, does little harm on a site that is otherwise fast and clear.

But for a business whose site has to explain what it does and earn a call, take parallax off the message and off phones.

What to do

1. Open your home page on an ordinary phone.
2. Count the screens before the message appears.
3. Check whether anything judders as you scroll.
4. Turn on Reduce Motion and look again.
5. Move the message onto the first screen.
6. Switch parallax off on phones.
7. Keep only motion that explains or responds.

Step five is the one that counts. The other steps limit the damage the effect does; moving the message to the first screen means the effect no longer stands between the visitor and the answer.

Effects that fight the visitor's scrolling are the same problem as in fixed headers that cover half the phone screen.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.