Scrolljacking Explained
Scrolljacking - possibly a term that you've heard thrown about.
But what is scrolljacking exactly?
The term scrolljacking comes from the terms “scrolling” and “hijacking”.
Sounds kind of scary, right? 🙀
Scrolljacking can be a negative thing when it's not used smartly. It can also create accessibility issues.
But, of course, there are two sides to every story. Scrolljacking can lead to some rich experiences for the end user.
What Scrolljacking Is and Isn't
Firstly, I think it would help to clarify what scrolljacking isn't.
You see, there's a normal scrolling behavior that users are conditioned to.
There's an expectation that, as we move the scrollbar vertically, the page scrolls up and down right along with us. And this occurs in a synchronized and coordinated fashion.
Scrolljacking, on the other hand, is anything that departs from this conventional scrolling behavior.
Horizontal Scrolling
Let's take a look at possibly, one of the most extreme examples of the scrolljacking technique. This is where horizontal scrolling occurs when, in actuality, the user is scrolling vertically up and down.
This example is from a site called reputationsquad.com. (By the way, I'm not knocking any websites used in these examples. I'm simply using them to illustrate these scrolljacking concepts).
If I scroll my mouse wheel to the right on this site, you can see that things move horizontally.
However, the behavior I'm accustomed to when scrolling right is for the page to move vertically.
What are some of the pros of this kind of technique?
- it's atypical
- it's unexpected
- it can provide a more artistic/creative feel
This Amsterdam canals site is another one that uses horizontal scrolling. Here it’s used effectively to create the feeling of a book.
I can imagine flipping through the pages of this really nice coffee table book showing the history of the Amsterdam canals.
Scrubbing
Another common scrolljacking technique occurs when the scrollbar is used more like a scrubber than a scrollbar. Check out this site: everylastdrop.co.uk. I start scrolling on this site and immediately notice that the typical scrollbar behavior has been hijacked. In this case, it's being used more like a scrubbing playhead.
In a way, the user is being asked to take control of the animation.
Although we do make vertical progress down the page, most of the scrolling is being used to reveal the animations and to move visual elements in from the sides, and so on.
We can also look at Apple's Airpods Pro site to see this same type of scrubbing scrolljacking technique. I feel like it's used very effectively here to highlight the product.
If I scroll down a little bit, for example, I eventually get to a part where I can scroll-scrub the animation of silicon tip sizes.
If you try it, you'll see that you can go backward and forward while affecting the animation.
Techniques like this can help engage the customer by giving them a deeper and more interactive experience/feeling of the product.
On the other hand, I can imagine some users being turned off by this kind of thing. Especially if all they really want to do is scroll to see the product specs.
Parallax
Another technique, often considered to be a form of scrolljacking, is the famous parallax effect.
There's a simple example of it on this site called sleepiest.com.
With parallax effects, you have elements on the page that are moving at different speeds. This creates an illusion of depth.
A more extreme example, though, is on the site sbs.com.au.theboat In this case, it helps bring the story to life and adds a sense of drama.
Yet, as I scroll, I also notice that the scrolling experience feels atypical. Normal scrolling tends to feel more tightly coupled to the vertical movement of the page.
These parallax effects make the scrolling feel looser and less tightly coupled. It messes a bit with that tightly coordinated advancement up and down the page.
Of course, there are many other scrolljacking techniques out there. Pinning, for example, is another common one. Changing the look and design of the scroll bar itself can also be considered scrolljacking.
I'm curious if you're using any of these scrolljacking techniques on your sites. Check out the video below and drop me a comment!
