In 2012, The New York Times published a web-based ‘feature article’ called ‘Snow Fall: The Avalanche at Tunnel Creek’. The story, written by John Branch, depicts the real-life tragedy of an avalanche encountered during the dangerous pursuit of back-country skiing. There are graphic descriptions of the aftermath; it is compelling reading. There is a strong sense of the ‘natural sublime’; the landscape is vast, awe-inspiring and capable of large-scale devastation. There is also an element of voyeurism related to the human tragedy that perhaps cannot be detached from the innovative visual presentation. ‘Snow Fall’ became famous for pioneering a high-production-value longform reading experience on the web, transformed by various multimedia elements and a technique known as parallax scrolling. The article led to a figurative avalanche of ‘art-directed’ longform multimedia features and a swirl of debate about their effectiveness.
The Parallax View: Multi-layered Storytelling
While parallax scrolling has its origins in the multiplane camera effects of animated films such as Disney’s Snow White and the Seven Dwarfs, parallax as a visual effect in computer graphics dates back to 80s video games (‘Moon Patrol’ is credited with being the first to employ it). I remember being ten years old and standing in a department store, staring wide-eyed at an Amiga 500 running ‘Shadow of the Beast’. The side-scrolling background was created from 12 ‘parallax’ layers, each layer scrolling slightly slower than the one above to create an uncanny illusion of depth through motion – in this case, a green field receding towards the mountains. The visual trick was a technical achievement for the time, summoning a landscape greater than the confines of the screen.
As video game hardware has become capable of producing true 3D environments, the 2D speed-based parallax effect has fallen out of favour. In recent years, parallax has been revived in web design, where it is used as a way of adding depth to (mostly) vertically scrolling websites. It has become a frequent design element in web-based storytelling, more often in journalistic features than works of fiction. In 2015 parallax has been around long enough to have peaked as a trend – major websites like Spotify, which previously employed parallax on their landing pages, have since redesigned them to be parallax-free. A University study showed mixed results about the effectiveness of parallax in User Experience (UX) design. However, User Experience (UX) or User Interface (UI) design trends are often concerned precisely with use – their utilitarian focus does not always reflect the new user/reader hybrid – are you browsing a hotel website or reading about an avalanche? While Parallax is only one of many techniques used in visual storytelling, it has perhaps been the most prominent and controversial. As we become more comfortable with web-based storytelling, we must ask if parallax adds anything to the longform reading experience and what might develop from its use.
Portrait and Landscape: The Importance of Frames
Unlike Kafka’s Wound (the focus of my previous post), ‘Snow Fall’ is a steadfastly linear read; parallax only works when the user/reader scrolls (most often from top to bottom) to further the progression of the story. ‘Snow Fall’ uses Chapters as clear starting points for the scroll, but once started, the reader encounters transitions rather than page turns; the parallax effect is employed at the top of the chapter and at various intervals where the page breaks away leaving the eye dangling over an animated mountain range. Perhaps ‘Snow Fall’ became an archetype precisely because the expansive visual experience reflected the subject matter. The point of using an effect such as parallax should be to exploit the relationship between form and content in a process of ‘framing’.
The parallax effect is just one aspect of this framing strategy in ‘Snow Fall’. As the page scrolls down, we encounter multimedia elements that fade into and out of the white background. The story is accompanied by a range of animated map data. We view the story from multiple angles or ‘frames of reference’; from the formal and scientific viewpoint of infographic data to the intimate personal viewpoint of photo galleries and testimonial video – often very emotionally charged in tone. ‘Snow Fall’ includes raw audio of a Mountain Rescue radio operator reporting the deaths of members of the group to friends and relatives back at the ski resort. The audio is embedded beside the writer’s description of the event – this is a still strange multimedia combination of prose writing trying to describe something that is also included ‘as it is’. This comparative space between the thing and its description now extends from the static relation of photographs and illustrations to temporal audio and video.
‘Snow Fall’ won a Pulitzer Prize and attracted much publicity in the online and offline print world, to the extent that ‘to snowfall’ became a niche verb-meme in the digital publishing industry and a ‘Snowfaller in chief’ was appointed at The New York Times. Praise and criticism is well documented in the web design blogosphere. Bobbie Johnson, writing on behalf of the well-known digital publishing platform, Medium, wrote an article called ‘Snowfallen’ in 2013 with the subhead reading ‘Just because you can, it doesn’t mean you should.’ Jonson was concerned that, in the wake of ‘Snow Fall’s impact, longform publishing platforms such as Medium would be expected to create more ‘innovative’ multimedia articles. We hear the familiar accusation of distracting presentation: “Can you even remember what happens in Snowfall? Do you remember who wrote it? What did the multimedia help you do?” These questions are best answered by reading ‘Snow Fall’ for yourself. Johnson goes on to point out the disconnect between form and content: “When you add multimedia elements, they have to work for the reader. They have to be in the service of the reading experience. They have to make the story better. Instead, they’re already starting to become the entire point of the experience.” The problem, as I see it, is that ‘Snow Fall’ fitted the ‘frame’ and that there is justified reservation about trying to fit other content into that same design.
Scroll to Continue…
Johnson provides a useful crowed-sourced google spreadsheet of articles similar to ‘Snow Fall’ which gives you an idea of how the technique has been used elsewhere (as well as some earlier attempts at multimedia storytelling). Notable examples are music website Pitchfork’s art-directed ‘cover stories’ on Bat for Lashes and Daft Punk, both of which incorporate animated photoshoot imagery into a multiplane magazine-style layout, and a subsequent NYT article called ‘Tomato Can Blues’, which combines parallax with graphic novel-style artwork to tell the true story of a cage fighter who faked his own death. In the case of the Pitchfork articles and ‘Tomato Can Blues’, the ‘framing’ is far more portrait than landscape. Interestingly, ‘Tomato Can Blues’ uses the multiplane layering of parallax to create a sense of claustrophobia instead of expanse.
An alternative example of web-based visual storytelling can be found in ‘Firestorm’, created by The Guardian (a rival to The New York Times for innovative web journalism). ‘Firestorm’ is the story surrounding the smartphone photos taken by a Tasmanian family stranded out on a jetty during a savage bushfire. Once again we are immersed in a sense of foreboding for most of the read, which leads to the depiction of a natural disaster; in the case of ‘Snow Fall’, the avalanche, in the case of ‘Firestorm’ the Bushfire. ‘Firestorm’ is more multimedia heavy than ‘Snow Fall’ using looping video backgrounds behind sparse text. Because of the constraints of video we are back in more familiar screen/frame territory here – a more claustrophobic experience. While Firestorm does not use the parallax effect to depict its landscape, it still uses the scroll to tell its story.
Given the range of web-based templates, libraries and services available now it is relatively easy to reproduce the basic framing devices of ‘Snow Fall’. The makers of a web design tool called Skroll Kit were apparently sued by The New York Times after they posted a YouTube video claiming that the layout could be replicated using their tool in about an hour. Skroll Kit has since been sold to Automattic, the commercial arm of WordPress, but there are numerous online solutions for building a multimedia story, such as Atavist, Shorthand, Racontr and the WordPress plugin, Aesop Story Engine.
The parallax effect is capable of creating an immersive visual experience given the right content, but it doesn’t add out-of-the-box enhancement to visual storytelling. More often than not, when used without consideration, parallax can disengage a sense of continuity between form and content. The stereotypical parallax site wants to suggest expanse – parallax website templates often use stock photos of mountain ranges to showcase their visual effects in a strange echo of ‘Shadow of the Beast’ on the Amiga 500. It is vital that these types of effect are used appropriately as ways to frame particular content. However, it is also possible for the content to reconfigure the frame in interesting and unusual ways.
Perhaps one of the most visually striking recent examples of Parallax in storytelling can be found in ‘The Boat’, a web-based animated graphic novel commissioned by Australian broadcasting company SBS and based on a short story by Nam Le. ‘The Boat’ uses parallax, animation, sound and scanned sumi-e artwork. Here parallax suggests both the expanse of the ocean and physical and psychological claustrophobia. I will be looking more closely at ‘The Boat’ in my next blog post.
This article is part of a blog series about Storytelling and web design.
Key Links
- ‘Snow Fall: The Avalanche at Tunnel Creek’
- ‘Snowfallen’ by Bobbie Johnson of Medium
- Johnson’s crowdsourced Google spreadsheet:
- A University study at Purdue University into the effectiveness of parallax in User Experience design
- Excellent YouTube series by Dev Tips exploring more examples, plus a tutorial on how to make a parallax website