7 Parallax Scrolling Tips That Will Change The Way You Design Websites.

By Nir Barlev


Apr 9, 2014


One of the biggest website design trends at the moment is parallax scrolling. With parallax, any item on your canvas moves at a slower rate than the foreground elements, creating a 3D effect and a heightened interactive experience when scrolling. This design trend is so popular that even if you’ve never heard of parallax scrolling, you’re likely to have seen it in action online.


In fact, some of the biggest brands, including Lexus, Puma and Rimmel, use parallax scrolling to bring their websites to life.

 parallax scrolling tips


Despite all the hype, many remain skeptical and argue that parallax only detracts from the content. Parallax’s bells-and-whistles approach doesn’t work with all content: often, as is the case with the leaves at the bottom of an article about Baratunde Thurston leaving the internet for 25 days, it makes things harder to read. To be truly effective and to tell compelling stories, parallax needs to be used appropriately and in moderation. A good example is a Pitchfork article about the punk band Savages: it uses parallax scrolling to highlight pull-quotes.


Whatever your thoughts on parallax, it can’t be overlooked when designing your site. Parallax adds a new dimension to website design and pushes the boundaries of what’s possible. Here are 7 tips every designer should consider before using parallax scrolling.



1. How Much Scrolling is Too Much?


Many parallax critics argue that forcing website visitors to scroll can quickly irritate users and cause them to lose interest. This is particularly the case when it comes to text-heavy websites that require lots of effort from the reader to get to the bottom of the page. Website visitors will also quickly become uninterested if they have to scroll too much to understand what the website is about. For many, too much scrolling is gimmicky and very distracting. In fact, one study found that motion sickness sufferers tend to find parallax disorientating.


Parallax scrolling is a highly effective storytelling technique when used sparingly and appropriately. Scrolling adds depth to a website and makes the website content seem far more tangible. It creates highly engaging websites that provide a uniquely interactive experience. Ideally, a parallax page should be long enough to convey an idea without overwhelming a reader. A powerful example of this is the Apple website for the Mac Pro -- it uses scrolling to give potential buyers a 360-degree view of every aspect of the product, from the fan to the processor.



2. How Effective Is It To Design Below The Fold?


Parallax defies one of the basic tenets of design: that all the important information needs to appear “above the fold,” or the upper half of the page, in order to catch a reader’s attention. Some fear that with non-traditional parallax design, website visitors will leave the site without seeing valuable information. However, in today’s multi-screen, scroll-oriented world, design no longer needs to be confined to the upper fold.


How Effective Is It To Design Below The Fold?


Interestingly enough, a recent study found that 80 percent of viewing attention is still focused above the fold. While this space is still important, it needs to be simple and clutter-free to capture attention. However, increasingly more and more readers are scrolling pages. One study found that if a website has a scrollbar, at least 76 percent of users will use it. Adding an arrow to show users they should scroll for more is also an effective way to encourage scrolling. Scrolling is becoming habitual and commonplace, with an estimated 68 percent of people reaching a website page’s halfway point. Parallax scrolling has also been found to increase user engagement and time spent on page.



3. How Does Parallax Effect Load Time?


Parallax relies on CSS, combined with Javascript/jQuery for manipulating the position of all the elements on the website. This means that for every scroll, the browser needs to calculate the position of the pixels, while simultaneously manipulating each element. This often means that parallax websites are too heavy to load quickly, and can be especially frustrating for users with slower connections.


There are several workarounds to improve performance. Generally, wherever a scroll exists, the browser needs to do a series of visual updates, slowing performance. This can be avoided using a requestAnimationFrame callback: this tells the browser there's an animation you want performed, and requests the browser to update the animation before the next website repaint. This method prevents a forced visual update with every scroll event.


Another approach is to apply 3D transforms to elements to which you want to add more dimension. This creates a new layer for every element that 3D transforms are applied to. While you may see impressive results initially, this can affect performance in the long run. The important thing is to use the best platform and execute correctly for optimal performance.


The CSS required to create a parallax effect is actually pretty simple. This is why you should rely mostly on CSS, and take the script usage to a minimum. This will ensure better loading times, and cleaner code as well.



4. How Does a Poor Internet Connection Affect Parallax?


Parallax websites are often image-heavy, which means that in order to render properly, they require more bandwidth than the average website. This becomes problematic for users with poor internet connections who are likely to lose interest with slow load times. And since very few users will wait around for a website to load, it’s important that designers find an effective way to improve load time.


How Does a Poor Internet Connection Affect Parallax?


There are always tweaks a designer can make to improve performance and loading time. One solution could be to develop two versions of the site, one using parallax scrolling and the other static HTML. This would make it easier for users with poor internet connections to view and load the site.

There are always tweaks a designer can make to improve performance and loading time. One solution could be to develop two versions of the site, one using parallax scrolling and the other static HTML. This would make it easier for users with poor internet connections to view and load the site.



5. How Well Does Parallax Work on Mobile Devices?


One of the main criticisms of parallax design is that it doesn't work properly on mobile devices. In most cases, a parallax website viewed on a mobile device will either switch to non-parallax or simply direct traffic to a separate website optimized for mobile. Given the shift to mobile-centric browsing habits, this is a huge oversight which could negatively impact conversion rates. It’s important that designers invest as much in the mobile experience as they do in how a website looks on a desktop.


Since mobile browsers limit script execution when scrolling, designers need to find creative ways to implement parallax effectively on mobile devices. Several developers have made workarounds relying on CSS3 transforms to give the effect of native scrolling. These CSS3 transforms emulate the interactive experience of viewing a parallax website on a desktop. Several touch scrolling libraries make it possible to run parallax on mobile: a few of the main ones include iScroll, Zynga Scroller and Scrollability.



6. How Does Parallax Affect SEO?


Parallax websites are one-pagers which present many challenges for effective SEO. The difficulty with such websites is that all the keywords have to be concentrated on one page instead of spread out across an entire multi-page website. This makes it much more difficult to rank well for specific keywords. Having only one page also affects inbound links, which, in the case of a parallax site, can only direct to one page.


Since parallax websites have only one page, they also have only one URL. This means you'll probably only be able to include one relevant keyword in the URL, whereas a multi-page site can use keywords in secondary pages and in that way rank for those keywords. Other issues parallax websites encounter include lack of H1 tags and only one set of meta-data.


How Does Parallax Affect SEO?


There are several ways to fix the SEO issues on a parallax website. One option is to create multiple pages. This means that the content from the parallax homepage will direct to separate, content-rich static pages. This will add more keywords to your site and ensure each topic has its own URL. This is the approach Spotify takes with its parallax homepage.


Another option is to use jQuery's 'pushState's' functionality, which divides a single parallax page into multiple sections, each indexed with its own unique URL and meta-data. This is highly effective, as it allows a single page to be indexed for unique content multiple times. A simpler approach is to use parallax scrolling for the homepage with SEO-friendly URLS that do not have parallax scrolling.


With some basic PHP-knowledge and a little tinkering, it’s easy to fix the SEO issues that affect many parallax pages. And the best part is that, with the many different options for optimizing parallax pages, you can find a solution that fits your website needs and skill level.



7. Is Parallax Here to Stay?


Is Parallax Here to Stay?


Parallax provides an engaging, interactive, and unique online experience that has transformed content consumption online. And while it may have many limitations, parallax scrolling keeps getting better, as more and more designers feel comfortable innovating with this technique.


Parallax has changed not only how we consume content online, but left an indelible mark transforming how designers think and how they approach design. Parallax isn’t some passing trend. It’s an intriguing advance that’s here to stay.



Create Your Parallax Website - No Coding Necessary.


As exciting as parallax sounds, it can be a bit intimidating if you’re not a programmer. But not anymore. Even if you don’t know what to do with Javascript or have never heard of PHP, you can now create pixel-perfect parallax websites that bring your offering to life.

Brought to You by Webydo.

See how Webydo fits into your design workflow and business.

Request A Live Demo

Blog Menu

Subscribe to our blog:

//The disqus (comments) addition
comments powered by Disqus