Home › Blog › Web design & accessibility
Parallax Scrolling Alternative: Motion-Safe Section Navigation (Live Demo)
- Parallax and scroll-triggered animation can make some visitors dizzy or nauseous. The W3C classifies parallax as typically non-essential motion.
- A practical alternative is section-based navigation: native scrolling, CSS
scroll-snap, stable backgrounds, short opacity transitions and visible next/previous controls. - It is not scrolljacking. You never intercept the wheel or touch input.
- Below you can try both approaches live, side by side.
1. Live demo: parallax vs. section navigation
Scroll inside the frame below. Controlled sections is on by default. The motion-heavy version is opt-in, because it deliberately reproduces the kind of effect this article is about.
Mode: controlled sections.
The demo honors your operating system's reduced-motion setting and the "Reduce motion" button at the top of this page. When either is on, the motion-heavy mode is locked.
2. Why parallax makes some people dizzy
Your brain builds its sense of movement from two main inputs: what your eyes see and what the vestibular system in your inner ear feels. When large parts of the screen move while your body stays still, those signals disagree. Most people barely notice. People with vestibular disorders, migraine or motion sensitivity can feel dizziness, nausea, headaches or disorientation.
The W3C addresses this in WCAG 2.1 Success Criterion 2.3.3, Animation from Interactions. It explains that when scrolling moves elements beyond the essential movement of the page, it can trigger vestibular reactions, and it names parallax as a typically non-essential animation. Scrolling itself is considered essential and is fine.
This is not a niche concern. An A List Apart article on motion sensitivity cites figures from the Vestibular Disorders Association of roughly 8 million American adults with a chronic balance problem and another 2.4 million with chronic dizziness. The same piece points to large-distance movement, exaggerated parallax and scrolljacking as the most likely triggers.
The motion patterns most likely to cause trouble
- Backgrounds moving at a different speed or direction than the content you scroll.
- Elements that scale, zoom or rotate as you scroll.
- Large horizontal movement triggered by vertical scrolling.
- Movement that is not tied to the speed of your own scrolling.
- Scrolljacking: the page takes over your wheel or swipe and moves on its own schedule.
3. What motion-safe section navigation is (and is not)
Section-based navigation splits a page into full-height sections. The visitor scrolls normally and each section settles cleanly into view. The "wow" comes from layout, typography, imagery and a short fade, not from layers sliding across the screen.
| It is | It is not |
|---|---|
| Native browser scrolling | Intercepting wheel or touchmove events |
CSS scroll-snap to settle on section edges | JavaScript animating the scroll position on every input |
| Stable backgrounds and short opacity changes | Parallax layers, zoom and rotation tied to scroll |
| Visible prev/next buttons and keyboard support | Navigation that only works with a mouse wheel |
| All text in the HTML from the start | Content that only appears after an animation runs |
4. How it works: the 6 building blocks
You don't need a heavy animation library to get this effect. Motion-safe section navigation rests on six principles, all supported natively by modern browsers.
- Native scrolling stays in charge. The browser handles every wheel, swipe and key press. Nothing intercepts the user's input.
- CSS scroll-snap settles each section. Snapping only decides where the scroll comes to rest, so movement always matches what the user did.
- Sections grow with their content. Each section is at least one screen tall but can expand, so zoomed or translated text never gets clipped.
- One small, short transition. The active section gains full opacity. No sliding, scaling or rotating layers.
- Two ways to switch motion off. The page follows the visitor's
prefers-reduced-motionsetting and also offers an on-page "Reduce motion" control. - Visible, labeled controls. Previous/next buttons and keyboard focus styles make every section reachable without a mouse.
Further reading: MDN: prefers-reduced-motion · MDN: scroll-snap-type
5. Five mistakes that make scroll-snap inaccessible
1. Using mandatory with tall content
If a section is taller than the screen (common on phones or when users zoom to 200%), mandatory snapping can push them past content they never got to read. Use proximity snapping, or turn snapping off on small screens.
2. Fixed height: 100vh
A fixed height clips content when text wraps or the user enlarges fonts. Use min-height so sections can grow.
3. Hijacking the wheel "to make it feel premium"
Calling preventDefault() on wheel or touchmove breaks trackpads, keyboard scrolling and assistive technology, and it is exactly the scrolljacking pattern that triggers motion sickness. Let the browser scroll.
4. Revealing text only through animation
If text starts at opacity: 0 and waits for JavaScript, a failed script, a slow device or a crawler sees nothing. Start visible (or nearly visible) and enhance from there.
5. No way to turn motion off
Respect prefers-reduced-motion and offer an on-page toggle. Many people who get dizzy have never found the OS setting. WCAG 2.3.3 describes a site-wide control to disable non-essential animation as a valid approach.
6. Comparison: when to use each approach
| Motion-heavy parallax | Section navigation (motion-safe) | Plain scrolling | |
|---|---|---|---|
| Motion-sickness risk | Higher | Low | Lowest |
| Visual impact | High, first seconds | High, sustained | Depends on design |
| Keyboard / screen reader | Often fragile | Good if built with the principles above | Best |
| Performance on low-end phones | Often poor | Good (CSS + one observer) | Best |
| Best for | Rarely the best choice | Brand stories, portfolios, product launches, landing pages | Articles, docs, long forms, stores |
Section navigation is not a replacement for every page. This article, for example, uses plain scrolling because it is long-form reading. Use sections where each screen has one message.
7. How to test it on your own site
- Turn on reduced motion in your OS. macOS: Accessibility › Display › Reduce motion. Windows 11: Accessibility › Visual effects › Animation effects off. iOS: Accessibility › Motion › Reduce Motion. Android: Accessibility › Remove animations. Reload and confirm non-essential motion is gone.
- Use only the keyboard. Tab, Space, Page Down and the arrow keys must reach every section and every button.
- Zoom to 200% on a phone-width window. No content may become unreachable because of snapping.
- Disable JavaScript. All text should still be readable.
- Ask real visitors. Show both versions to a few people who say they get motion sick and note which one they can use comfortably for several minutes.
8. Motion-safe checklist
- No background moves at a different speed than the content.
- No scale, zoom or rotation tied to scroll position.
- Native scrolling everywhere. No
preventDefault()on wheel or touch. scroll-snap-type: proximity, or snapping disabled on small screens.- Sections use
min-height, not fixed height. prefers-reduced-motionremoves all non-essential transitions.- A visible on-page "Reduce motion" control, remembered per visitor.
- Prev/next buttons with labels, and visible focus styles.
- All text present in the HTML without JavaScript.
- Tested at 200% zoom, keyboard-only and with reduced motion on.
9. FAQ
Can parallax scrolling cause dizziness?
It can for some people. The W3C notes that when scrolling moves elements beyond the essential movement of the page, it can trigger reactions in people with vestibular disorders, including dizziness, nausea and headaches. Parallax is named as a typically non-essential animation.
What is a good alternative to parallax scrolling?
Section-based navigation: full-height sections, native scrolling with CSS scroll-snap, stable backgrounds, short opacity transitions, visible next/previous controls, and all non-essential motion removed when prefers-reduced-motion is on.
Is section-based navigation the same as scrolljacking?
No. Scrolljacking intercepts wheel or touch input and replaces the browser's scrolling with scripted movement. Motion-safe section navigation keeps native scrolling and only lets CSS settle the final position.
Is CSS scroll-snap accessible?
It can be. Avoid mandatory snapping when content can be taller than the viewport, use min-height, keep every section reachable by keyboard, and never hide text that only appears through animation.
Does WCAG forbid parallax?
No. WCAG 2.1 SC 2.3.3 (Level AAA) asks that non-essential motion triggered by interaction can be disabled. Basic scrolling is essential and allowed. Respecting prefers-reduced-motion and offering an on-page toggle are common ways to meet it.
Is section-based navigation bad for SEO?
Not when built with real HTML. If every section is in the markup with proper headings and does not depend on JavaScript to load its text, search engines read it like any other page.
Browse our live template demos and pick the style that fits your brand.
See the live template demos