Scrolljacking: The Good, The Bad, and The Ugly

In its simplest terms, scrolljacking is the web industry term for repurposing the scroll wheel/motion for something other than the expected advancing up or down the page. Though some may have a more specific definition, this is the one we're going to work with in describing unexpected behavior triggered from scrolling.

There are several ways developers have scroll jacked different sites at varying levels of "jackedness," if you will. Doing a quick Google search, you can find plenty of strong opinions on scrolljacking, most of which reveal vehement opposition.

In this post, I will explain and critique a few different scrolljacking techniques and give my thoughts on how and when this can be a positive experience.

Technique 0: Parallax

Probably the most common example of scrolljacking these days is a parallax background — when a background image moves at a different speed than the rest of the content on the page, creating an interesting layered effect. This is a very minor example of scrolljacking, though it does use the scroll to manipulate the page in a way that is not consistent with what users expect from a scroll wheel.

I've decided to make this "Technique 0" because at this point, though it is falling out of favor, most users don't bat an eye at seeing parallax backgrounds. Of course any element can have the parallax effect applied to it, though backgrounds are the most common.

Technique 1: The Full Jack

Some sites feature elements that are essentially slides which take over the full browser area and use the scroll wheel to advance or rewind. Some examples of this technique can be found at Apple, Huge Inc, and Yapstone.

These are pretty easy to get used to, though this can be frustrating for a user who may want to jump around the content or quickly scan the whole page. These are sections that demand your attention the same way a pop-up does. You are not able to continue to the rest of the page until you get past the scroll-jacking section. Pop-ups are universally hated, so why should scrolljacking sections be viewed differently?

Technique 2: The Slight Jack

Some sites still show the expected scrolling of text with a background image that becomes fixed and perhaps changes to a different background image at a certain point. It eventually either becomes relative again and scrolls up the page or gets covered by content below the particular section. This would be a pretty low level of scroll "jackedness," and perhaps the least offensive. A couple examples of this technique can be found at The New York Times and Grammarly.

Technique 3: The Fading Jack

A third variation can be found at dstillery. This technique utilizes both fixed background and foreground elements, and then uses scroll position to fade through text and imagery.

This is the least intuitive example for the end user. It is easy to get to a point where you can use the scroll wheel a bit and nothing will change because you have passed one trigger but have not yet hit another. Issues like this can make it seem like the site is broken by not responding to your scroll.

So What's the Big Jacking Deal?

Scrolljacking alters the fundamental truth users have come to expect from using their scroll wheel. Think of it like renting a car and then when some a-hole cuts you off on the freeway, you go to honk your horn but instead you get a spray of washer fluid and the wipers start wiping at full blast.

OK, so scroll jacking certainly doesn't create dangerous situations, but still, it goes against everything a user has learned to expect from their previous experiences with scrolling, both on the web and in most applications.

How Can Designers/Developers Practice Responsible Scrolljacking?

Probably my favorite example of scrolljacking, which I would call a slight variation to Technique 2 comes from Melanie Daveid. This is an example of half of the screen starting as relative, becoming fixed for a certain duration, and then becoming relative again.

Only half the screen gets jacked at a time, so you always see the continuity of the page scroll. We'll call this technique "The Half Slight Jack." Then she's got the cherry on top at the bottom of her page with her scroll event animation.

In my opinion Melanie Daveid has it right on, and Technique 2 is pretty good as well. When it comes to scrolljacking, as long as something on the page is still moving in an expected way, the user is getting that motion and a good deal of the control they expect.

It can be used as an interesting and interactive way to tell a story without the use of a slider or accordion, which, by the way, can be used against you when it comes to SEO.

Though scrolljacking has many opponents, I don't see it going away anytime soon. I'm going to guess it will become more prevalent throughout the web and that UX designers will continue to come up with new ways to scrolljack, many of which will continue to get serious opposition from the web community.

from HubSpot Marketing Blog http://blog.hubspot.com/marketing/scrolljacking-the-good-the-bad-the-ugly