10 examples of bespoke article design and scrolling goodness
Have you been noticing all the pretty sliding/scrolling articles that are popping up around the Internetz? My students think they’re wonderful, and so do I. So let’s look at a roundup of some great ones.
Of course we’ll begin with Snow Fall: The Avalanche at Tunnel Creek. This New York Times multimedia feature had the world journalism community talking and tweeting like crazy as soon as it appeared online. This blog post – More than 3.5 million page views for New York Times’ “Snow Fall” feature – reproduces an internal New York Times memo about how popular the multimedia feature turned out to be. In this post at Source (a project concerning journalism code) – How We Made Snow Fall: A Q&A with the New York Times team – the graphics director, graphics editor, video journalist, and deputy director for digital design who created this feature explain how they did it.
America: Elect! (from The Guardian) is not only a fun, slidy mini-graphic novel – it’s also the subject of a short but very helpful how-to article: How we built our “America: Elect!” graphic novel interactive, by interactive developer Julian Burgess. Parallax scrolling library: skrollr (check this one out).
ESPN was ahead of the pack with The Long, Strange Trip of Dock Ellis, a lavishly illustrated story about the Pittsburgh Pirates pitcher. Plugin: curtain.js.
Pitchfork magazine used the technique as a showcase for photography, featuring Bat for Lashes singer Natasha Khan, in a cover story titled Glitter in the Dark.
Lost and Found, an NPR story about photographer Charles W. Cushman, has a beautiful horizontal scrolling audio story in the middle of the page. Look for the Play button below the heading “The Year Is 1938.” Framework: popcorn.js.
The Guardian‘s Burgess linked to a scrolling graphic story about fracking — What goes in and out of hydraulic fracturing (it appears that designer Linda Dong rolled her own scrolling code for this one) — which reminded me a little of Every Last Drop, which uses scrolling graphics to tell the story of how much water we waste every day (parallax scrolling library: skrollr). I found the fracking story to be more journalistic, especially given the sources listed at the end.
Another long-form narrative dressed up very nicely with this technique: Cycling’s Road Forward, from The Washington Post. Framework: Bootstrap. Tools include Modernizr.
Too Young to Wed (from the United Nations Population Fund) is a little harder to navigate than the others, in my opinion (it interrupts the vertical scroll with horizontal-scrolling slideshows), but the gorgeous photography and heartbreaking story make it well worth a look. jQuery plugin: ScrollTo.
There are many tutorials for parallax scrolling — here’s one.
Related: The future of the feature: Breaking out of templates to build customized reading experiences, by Kevin Nguyen, November 2012
Do you have other examples to recommend? Please share links in the comments!
Categories: code, design, examples