Browsers have had consistent scrolling behavior for years, even across vendors and platforms. There’s an established set of physics, and if you muck with the physics, you can assume you’re making some people sick.
Guidelines to consider before adding swooshy parallax effects:
- Respect the Physics
- Remember that We Call Them “Readers”
- Ask for Consent
Given all the work that goes into a powerful piece of journalism—research, interviews, writing, fact-checking, editing, design, coding, testing—is it really in our best interests to end up with a finished product that some people literally can’t bear to scroll through?
- Violates User Expectations
- Causes Motion Sickness
- Reduces Accessibility for Disabled Users
- Inconsistent Performance Across Devices
- Impairs Usability for Power Users
- Increases Page Load Times
- Breaks Native Browser Features
- Makes Scroll Position Unclear
- Adds Maintenance Overhead
- Disrespects the User’s Control
The title is somewhat misleading—currently it’s about native lazy-loading for Chrome, which is not (yet) the web.
I’ve just been adding loading="lazy" to most of the iframes and many of the images on adactio.com, and it’s working a treat …in Chrome.
Another take on the scrolling navigation pattern. However you feel about the implementation details, it’s got to better than the “teenage tidying” method of shoving everything behind a hamburger icon.
A nice self-contained script for animating items into view as the document scrolls.
I’d like be interested to hear what Graham thinks of this code—he’s my go-to person for smooth scroll-based animations.
(I’m very confused by the tagline for ScrollReveal—”Easy scroll animations for web and mobile browsers”—eh? Mobile browsers are web browsers …”web” is not a synonym for “desktop”.)
I think this might be the most tasteful, least intrusive use of scroll events to enhance a Snowfallesque story. It’s executed superbly.
You can read all about the code. Interestingly, it’s using canvas to render the maps even though the maps themselves are being stored as SVG.
(There’s a caveat saying: “This is a highly experimental project and it might not work in all browsers. Currently there is no IE support.” I don’t think that’s true: the story works just in IE …that browser just doesn’t get the mapping enhancements.)
Enhance your website, progressively.
Some buggy behaviour has been fixed in iOS 18 but now there’s a new bit of weirdness.
Trying to understand a different mindset to mine.
An exception to my general rule that ARIA attributes should be added with JavaScript.
Apply your ARIA attributes with JavaScript and then use them as hooks in your CSS.