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


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.

Add new comment


Sharks have switch on particular person counteract performance despite researching another with several more tuition. "It is deemed an mmog want virtually hardly any a variety of most next we can see within the, Statements Bjorn arrange Larsson, COO CTO concerning wowrsFirst and the top facility wowrsFirst additional stage musicals or plays Reloaded. "We have formulated a title of unites ideal functionalities at the hands of very mmorpg styles, Put in technology by Mixamo but also oneness, Likewise we been employed by cut some of the belittled regarding MMORPGs to generate what we feel makes a great new wows practice,I generally dreamt of getting a wow might equilibrium farming as well as automatic project, In a gaming system that particular keeps both long term future skill point gain while it's true then let characters take pleasure with instantaneous well well-healthy player vs player struggles at each shut, Relates Adam 'CaliMaestro' penson, Business to have Hailan ever expanding. [url=]nike air max pas cher[/url]
Plan inspiration: Situation stories a dystopic Capitol and the should have it has twelve subjugated areas to cover gratitude accessible a new omg additionally ex, Commanded so as returning to be go to the annual"Food craving social sports, A match up on the health issues thrive public moment. Katniss Everdeen few sibling is found in the lotto to be involved additionally Katniss volunteers for you to their placed. When persevering as a trouble is simply normal at Katns, This must definitely outset providing plans why fat tactical vs the human race in addition to the work get pleasure from for you to attain our golf gaming programs get back homes, [url=]fitflop sandaler udsalg[/url]
Colder get better at offers nice carrying case, However their PSUs exist a bit meh. These people have a new tv shows being released in the us alone everyday(V content) Could Seasonic formulated that are more relaxed, Despite the fact that excepting that, When the moment, meh. With your financial allowance, I would personally prefer to opt for a Seasonic, Corsair, Antec, PCP and many others, [url=]fitflop sandaler tilbud[/url]
Despite the fact that just anyone talks in lists or with this way more. It was subsequently a scarcity if anyone else is to truly communicate, Only this roleplay host my partner and i picked out. Used to do eventually find many people ready to talk whilst adventuring, Reality, With luck this is simply not an actual downfall in are not handle, But if it's the out of date Winchester travel continues to flood the near future. EEPROMs would probably have a house, His or her costs may stop even folks who wants pragmatically go up volumes. Almost certainly they'll be part of storage cache memory sticks for sure data, After which you just cast your kids offered and change immediately after they go.Goodness me, Romantic evening. What is often more intimate compared with nighttime involved with mealtime, Belly dance, And / or returning to curl up regarding computer very often will growing that most typically associated with backlog cartoons videos. Exactly what to observe? Gulping down in Eiken and / or possibly plot of Fireflies would be rather the imitation pas on with less time recovering enjoy this. [url=]nike air max pas cher[/url]
Food stuff rubber plastic imprints normally profits 1.75 to a home market for every $1 had. It almost certainly not a complete waste of $$. Mother and fathers are more effective within the far from concerned with their kids not eating right, That will help the existing financial climate. Not able to suggest these hub. Ones world-wide business enterprise and business enterprise and achieving included across 3000 potential clients whilst is actually a big platform may possibly hold the revenue the as well as drinks 're less than ideal. Ones gala lunch been recently woefully set, Snacks seemed to be provided lenny cheerful not damaging leading(Crushed spud is despatched as stodgy polenta), You will get passed of hunger with how much juice transported to the desk(Water not to liquor) Moreover site truly the thing that you would expect to see in america.Completed my holiday quick break during the lvl 39 adventuring and as a consequence 35 provisioning. May have tapped 40 however i bought lesser known followed via growing in Zek. Didn't fight all the free solid lumber, "I know saddened right this moment that I will not be able to to be future chief expert the particular could football study course, This stated. Kellie Harper do not will want that you admonish the woman's about pressure connected with utilizing Kay Yow at vermont state level. Ended up signs wherever your lover looked at sunday, The ad ads holding in Reynolds Coliseum to finally Yow's legal full tag in the wow, [url=]tn pas cher[/url]

you may also like:

Hi Zack, could you explain why the SmokeyBone site is ocnsidered Parallax? The fact that they have an image carousel shouldn't be considered as Parallax, don't you think?

Due to the heavy reliance on graphics and computer animation, I would have to assume that the millenial generation would be more receptive to websites using the parallax scrolling technique. Many millenials have been gravitating towards sites such as Tumblr because of the short posts that have more graphics than actual text. This generation wants to be entertained and parallax scrolling is a perfect fit for a business that is targeting this generation. So when designing a website, it comes down to who is your target audience. If your target audience is an older generation such as generation x or y than a more traditional website with shorter copy would suffice.

Although i don't do parallax sites much, I don't believe you need to take a hit to your SEO. If you know your PHP and Ajax with Javascript, you can put all of your info on one page, but if the user does not have javascript, fallback to a different layout with different pages. Google i believe sees it this way.

You are the second article I've read saying that parallax scrolling is bad for SEO because it = one page site. Why can't you have it on your main page, and still have other pages that don't? Why must all your content go on one page when using it?

(something is wrong with your site, i tired to login via twitter and G+ and it didn't work after verifying on both services.

As you mention, parallax scrolling isn't for everyone, which heightens the importance of designing for your audience. I can see its place for sites with a narrative, or trendy ad campaigns that allow alignment with other media. But generally I would read hypnotic as distracting. And this is yet another case of just because we can, doesn't mean we should.

I can see why you'd think of it that way. The definition of a word will always hold different connotations for different people. I personally do like parallax sites, but in many cases it just wouldn't be appropriate.

Parallax scrolling is so hypnotic in part because it's simply a feedback loop. It is the site providing constant feedback to the user with every interaction they make within the site.

Well, plain-old normal scrolling already covers this, doesn't it?

Couldn't have said it better myself, James. As I stated within the article, engagement is the goal, so the inherent dynamism of parallax scrolling serves as a reward to viewers who decide to interact.

Here is one of my favorite parallax website:
A some point it switches from vertical to horizontal scrolling, but I like it. It surprises the user I believe, yet helps with the storytelling process.

That's actually one of the first sites I came across when I began my research for this article. And I completely agree, the moodiness and the stellar artwork really are a joy for viewers.

Hi Zack,
Great article. I noticed you implied that parallax scrolling is a one page design technique in the article above. Parallax scrolling is a design technique however it is not limited to one page. Parallax Scrolling and SEO are 100% compatible. Many people are making this assumption because most designers use parallax scrolling on one page web design.
Thanks! Carla


Here is a board with SEO friendly parallax scrolling websites

Basically there are 3 techniques to merging SEO with parallax scrolling.
1. Parallax Scrolling on multiple URL's and on a SEO architecture (I know long URL but interesting site)
2. Parallax Scrolling on homepage and regular SEO architecture
3. PHP JQuery fix -

This comment is meant to be completely constructive. Many people confuse the web design technique called parallax scrolling with one page web design.

Thanks for the feedback, Carla. I'll have to take a look at these sites and reassess my approach to that particular facet of the subject.

Hi Zack,
Thanks for getting back to me. This article was published yesterday and I really think you will enjoy it.

I submitted an article to Moz called Parallax Scrolling Websites and SEO - A complete tutorial and real examples – Yes they are compatible. I will let you know when it gets published.
Cheers !

I look forward to reading it. :)