Static sites, slack and scrollytelling. | Clearleft
Cassie’s enthusiasm for fun and interesting SVG animation shines through in her writing!
Interactive Storytelling | Codrops
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.)
Related links
Lazy Loading Images and Video | Web Fundamentals | Google Developers
Jeremy Wagner offers a deep dive into lazy loading images (and video) with some advice for considering the no-JavaScript situation too.
Parallax scrolling with CSS variables | basicScroll
Don’t let the title fool you—this isn’t just for parallax scrolling (thank goodness!)—it’s for triggering any CSS updates based on scroll position. Using CSS custom properties makes a lot of sense. The JavaScript/CSS bridge enabled by custom properties is kind of their superpower. (That’s one of the reasons why I don’t like calling them “CSS variables” which makes them sound like Sass variables—they’re so much more than that!)
Your Interactive Makes Me Sick - Features - Source: An OpenNews project
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?
russellgoldenberg/scrollama: Scrollytelling with IntersectionObserver.
This looks like a handy JavaScript library for scroll-based events. But “scrollytelling?” No. Just …no.
Related posts
Sticky headers
A few things to remember if you’re going to using position:fixed.
aria-live
An exception to my general rule that ARIA attributes should be added with JavaScript.
ARIA in CSS
Apply your ARIA attributes with JavaScript and then use them as hooks in your CSS.
Accessible interactions
Abstracting common interaction patterns as a starting point for accessible components.
A new website for dConstruct 2014
A handsome redesign with a touch of playfulness.