Flag

We stand with Ukraine and our team members from Ukraine. Here are ways you can help

Home ›› Business Value and ROI ›› 6 Key Questions to Guide International UX Research ›› The Hypnotic Effect of Parallax Scrolling and How it Impacts User Experience

The Hypnotic Effect of Parallax Scrolling and How it Impacts User Experience

by Zack Rutherford
5 min read
Share this post on
Tweet
Share
Post
Share
Email
Print

Save

When implemented properly, parallax scrolling can create a hypnotic effect, drawing users deeper into your site and compelling them to act.

Parallax scrolling has become increasingly popular in web page design. Pages that employ it often create an impression of action through clever techniques that utilize page depth, animation, and movement.

Owing its beginnings to the multiplane camera technique developed by early animators in the 1940’s, parallax scrolling was first popularized in the 1980’s as a way to add depth in 2D video games. These day’s though, you mostly hear about parallax scrolling as a way to improve user experience in web design.

It works by having the foreground and background move at different speeds while the user is scrolling. This creates a hypnotic animated effect that can impress, engage, and direct the viewer’s attention toward whatever you desire. This can be extremely effective when attempting to draw attention to on-page calls to action, and parallax scrolling gives web designers an unprecedented amount of control over the flow of user experience. By having images enter, intertwine, and exit as the visitor scrolls, you’re able to create a visual narrative, giving your website a certain storytelling quality that can lull your visitors into a trance.

parallax scrolling

Example of parallax scrolling courtesy OhSqueezy

Advantages

So what does this mean for you? It means that, above all else, applying parallax scrolling can help engage your visitors. Creating a visually pleasing aesthetic with a fancy interface can be the difference in holding on to the fragile attention spans of the masses. This is because the unconventional format serves as an invitation to interact. People will automatically feel more engaged when they’re scrolling (which is an instinctive action) because doing so drastically alters the depth and content of their view. By simply scrolling, they’ve seemingly changed the fabric of the site itself. This creates a feeling of power and significance. It’s a psychological trick that pulls a visitor deeper into your website, by fueling their desire to explore.

Designing your website with parallax scrolling can help to improve all of the following areas:

  • Visitor engagement
  • Holding visitor interest
  • Directing the course of visitor attention
  • Making your site easily navigable
  • Storing all of your content on one page
  • Creating a compelling narrative around your brand

All of these factors combine to create an engrossing user experience. An experience that I’ve opted to describe as hypnotic, and it is hypnotic in a sense. When scrolling through a well-designed web page that employs parallax scrolling, a visitor does give up a measure of control to the web designer. Much like a roller coaster, they are along for the ride until they’ve reached the destination. A destination that’s predetermined by you, the designer.

Disadvantages and Solutions

There are some concerns with parallax scrolling that need to be addressed. In particular:

  • Page load times
  • Mobile viewing
  • Horizontal movement
  • Search Engine Optimization
Page Load Times

Because sites that have parallax scrolling often pack a lot of their content onto one page, things like animation and layered imagery can result in longer intervals between clicking and loading. This wouldn’t be a problem, except that visitors are notoriously impatient while browsing. If a page is taking too long, it’s often a signal that whatever is content it contains isn’t worth the actual time it takes to view.

As with every web design choice, there are pros and cons to implementing parallax scrolling

To circumvent this problem, it’s smart to keep your pages somewhat minimalist. The more animation, layers, and content you add to your page the slower it will be to load. So in order to cut down on the load time, you’ll need to avoid an overly busy interface. Doing so will free up those precious seconds while your visitors decide if they want to stick around for the pay off or not.

Mobile Viewing

Parallax scrolling does not play well with mobile technology. If you’re investing in a parallax enabled page, you need to have a separate mobile optimized site in place, or at least a mobile application in lieu of an unresponsive and ineffective mobile site.

Horizontal Movement

This is just a personal preference really, but many users find it odd when they scroll downward and the page moves horizontally. It can be an unexpected and unwanted phenomenon. That being said, you won’t please everyone all the time, and many users don’t mind horizontal scrolling in the slightest. So use your best judgment as to whether or not this is right for your site.

Search Engine Optimization

Many have claimed that parallax scrolling pages force you to take a hit on your SEO page rankings and subsequently your organic traffic. This is certainly true to a degree. Having one page rather than several means that you’re looking to rank for all your keywords on a single page. This will be a lot harder than ranking for one or two on multiple pages. Not only that, but you won’t be able to update your site’s content as often with fewer pages to work with.

Still, it’s not all hopeless. Parallax scrolling sites are magnets for back links. They increase page views and page view intervals. Also the unique design can escalate overall traffic, and as we’ve mentioned the main advantage is improved engagement. With more engagement, comes more social media sharing, which has a direct effect on page ranking.

Effective Examples of Parallax Scrolling

As with every web design choice, there are pros and cons to implementing parallax scrolling, so it’s a good idea to check out what a successfully integrated design might look like. Take a look at the following 5 examples to see what’s possible with parallax scrolling.

  1. A map of the history of Mario Kart
  2. The Smokey Bones Restaurant site
  3. A site advertising a music festival called Beer Camp
  4. Web design firm, Unfold’s site
  5. A site selling bicycle designs and prints

Parallax scrolling is not all that difficult to implement—either by tweaking code to achieve this effect or using jQuery plugins—and it makes for a uniquely hypnotic user experience.

 

Image of optical illusion courtesy of Shutterstock.

post authorZack Rutherford

Zack Rutherford, Zack Rutherford is a freelance copywriter, with an invested interest in UX and web design. A combat sports enthusiast and poetic soul, Zack endeavors to create beauty through syntax, sentence structure, and the liberal use of hyperbole. Follow him on Twitter (@zack_rutherford) or visit his website (Zackrex.com) to read all of his innermost thoughts.

Tweet
Share
Post
Share
Email
Print

Related Articles

In this article, I’ll share seven incredibly useful design resources that can elevate your skills as a UX designer in 2024 and make you a well-rounded designer overall. These resources not only help you work more efficiently but also automate repetitive tasks and enable you to create outstanding user experiences. So, let’s dive into this without further delay.

Article by Abhi Chatterjee
7 Must-Have Resources for UX Designers in 2024
  • The article explores seven indispensable resources for UX designers in 2024, offering insights into design methodologies, case studies, UX laws, and practical challenges to elevate designers’ skills and efficiency.
Share:7 Must-Have Resources for UX Designers in 2024
3 min read

Repetitiveness, complicated setups, and lack of personalization deter users.

Article by Marlynn Wei
​6 Ways to Improve Psychological AI Apps and Chatbots
  • Personalized feedback, high-quality dynamic conversations, and a streamlined setup improve user engagement.
  • People dislike an overly scripted and repetitive AI chatbot that bottlenecks access to other features.
  • Tracking is a feature that engages users and develops an “observer mind,” enhancing awareness and change.
  • New research shows that users are less engaged in AI apps and chatbots that are repetitive, lack personalized advice, and have long or glitchy setup processes.
Share:​6 Ways to Improve Psychological AI Apps and Chatbots
3 min read
Article by Josh Tyson
Meet the Intelligent Digital Worker, Your New AI Teammate
  • The article introduces the concept of Intelligent Digital Workers (IDWs), advanced bots designed to assist humans in various workplace functions, emphasizing their role in augmenting human capabilities and enhancing organizational efficiency.
Share:Meet the Intelligent Digital Worker, Your New AI Teammate
3 min read

Did you know UX Magazine hosts the most popular podcast about conversational AI?

Listen to Invisible Machines

This website uses cookies to ensure you get the best experience on our website. Check our privacy policy and