2013-06-17

How We Made Nature Take Over Fast Company's #Unplug Feature Using Parallax Scrolling

When we saw the print version of Baratunde Thurston's Fast Company cover story about his 25 days away from the internet, we knew we had to do something special online. Here's how Fast Company front-end developer Chris McClellan balanced usability and artistic intent to create the controversial effects.



Fast Company developer Chris McClellan has been itching to use parallax scrolling ever since his first interview at the company. He finally got his chance with the July/August issue, which features a cover story about Baratunde Thurston's experience taking a "digital vacation" for 25 days. As you read the digital version of the article, drawings of birds and butterflies by Max-o-matic from the print version start to fly by. By the time you reach the end of the article, nature has taken over the bottom third of the screen, as if urging you to stop staring at illustrations of the world on a screen and start living in it. The effect was surprisingly controversial, leading to comments like:

JANET VANDENABEELE
What is up with all the freakin flowers popping up that I can't X out and can't read this article?

RALF SKIRR
There was a time when web design was about usability and readability. Unfortunately designers don't care about that anymore.

(Disclosure: I know Fitzpatrick in real life; we share a love of bad jokes)

To figure out why we would make such a flabbergasting decision, I talked to Fast Company front-end designer Chris McClellan about where the idea came from and how he implemented it.

How did the idea come about?

The idea really came about after some brainstorming discussions with [Fast Company executive editor] Noah Robischon. Originally, Noah had the idea that the page should be void of any distractions. As you scrolled down or neared the bottom of the article, you could click a button to toggle on and off things like the header, sidebar, and poster image. I gave it some thought, but realized that we would also have to remove advertisements (our bread and butter). After reviewing the artwork used for the story in the print magazine, I thought it would be best if we used the same art in the digital version. I presented the idea, and it was well received, so that’s what we did. As a side note, Noah and I have also been looking for an excuse to use parallax scrolling since I joined Fast Company.

As a designer, how did you balance the idea of blocking readers' screens to prove a point with keeping the webpage usable?

Fortunately, the print artwork gave us a lot of birds and insects to work with. It made sense to have those elements flying up as you scrolled down the story. The encroaching foliage doesn't really begin to blossom until you get close to the comments. What made the execution of this really interesting and important to the digital version of the story was that you were in fact reading about unplugging while on a device. The artwork was intended to remind you of that fact.

Do you feel like you were successful, given the feedback we received after publishing? What did you change after the article was published to make it more usable and what did you learn from that feedback?

Everything works as expected and the negative feedback on Twitter was much smaller than I expected. In that way, I feel successful. The article became this living thing and I think people appreciated that. The feedback we did get was definitely focused on usability issues. People thought some of the graphics were obfuscating the text. That was something I needed to look at and find a solution for. The solution that seems to have worked--which we came up with this morning in response to feedback--is to hide the encroaching foliage on smaller devices (anything 980 pixels or smaller), and we provided a toggle within the article to disable the parallax feature.

You told me you decided to code it yourself rather than using readymade jQuery plug-ins. What prompted that decision?

I tried a couple of different jQuery parallax plug-ins. Unfortunately, all of them were missing a key feature or two. The things that mattered most were responsiveness and the ability to scroll any type of element. For instance, stellar.js looked very promising except that it didn't work on all devices or even when you resized the browser window. Also, I have never written a parallax feature before, and I figured that if so many people could do it, why couldn't I? The lack of key functions in each of the jQuery plug-ins I tried prompted me to write one that would work for our purposes and needs.

What techniques are you using for the scrolling and pop-ins?

I used the browser window's height to make most of the magic happen. Basically, what’s happening is there are absolutely positioned placeholders throughout the document. The child image of each placeholder element is positioned absolutely, out of view, at one window height below the parent. The window height is also a threshold, so that when you get to one window distance away from the element when scrolling down, the image child of the placeholder starts to scroll up. The scrolling image distance is directly proportionate to the distance scrolled within the threshold from the placeholder image. This distance is multiplied by a speed value in a data attribute on the placeholder element.

You decided to make your work reusable. Explain how you built this into the CMS and why it was important for it to be more than a one-off.

It just made sense to make this reusable. It would cost us a lot of extra code to make it for every parallax instance. This allowed us to think in terms of generalized features. We use Drupal 6 for the backend of our CMS, which has what are known as BBCodes (similar to shortcodes if you're more familiar with WordPress). With BBCodes, you can allow for predefined attributes to be set and parsed out into html.

Take the following:

View on GitHub

In the CMS front-end, this evaluates to:

View on GitHub

The data-style attribute is used to expose the style attribute to the editors creating the article. Then, we use JavaScript to put the styles where they need to be. Not all styles are placed on the parallax item wrapper div. If the parallax item is inline in the content, then the style attribute gets placed on the child element. If the parallax item is relative to the window, then it gets placed on the parallax item wrapper div. This allows editors to position the element anywhere in the document. The data-speed attribute allows editors to control the speed of the element relative to the speed of the user's scrolling (0 being no speed).