13 Quick But Wicked Tips For Parallax Scrolling Design.
By Zack Rutherford
Mar 26, 2014
There are problems with parallax scrolling that would give even the most ardent immersive design enthusiast pause. But these problems are, almost without exception, due to poor implementation. SEO issues are always at the forefront of these gripes, likewise with issues concerning responsiveness, browser compatibility, the gathering of analytics, oversaturation, and plain old superficiality.
Valid points and smart concerns, all. Yet all just as easily avoided, so long as one knows what they’re doing. In reality, there’s nothing wrong with parallax scrolling, it’s the way it’s put into practice that makes the trend seem stale or even unlikable.
Today, I’ll be going over 13 tips, tricks, measures, means, methods, and mechanisms—whichever you prefer—that bear a bit of consideration when you design a website with parallax scrolling functionality.
1. Immersive Sites Can (And Probably Should) Be Responsive.
One of the most irritating misconceptions about parallax scrolling is that it just can’t be implemented when you want to create a responsive website. Right off the bat I need to warn you that getting parallax to play nicely with mobile or tablet technology can be a chore, but it’s still far from impossible. Even so, this is a complex fix, and I’ll be spending a bit more time on it than on the other tips in this article.
You actually have two options:
1. You can create a responsive website that’s immersive on desktops, but not on mobile.
2. Or you can create a website with parallax scrolling enabled in either format.
Disable Parallax Scrolling On Mobile.
The former is, predictably, a lot easier than the latter. All you need to do to create a responsive site that disables parallax on mobile is to follow these easy steps:
- Use enquire.js
- Immobilize skrollr.js on screens below a certain ratio
- Put stiles in the desktop breakpoint
- And change the default mobile styles
Here’s an exhaustive tutorial that will walk you through each step.
This may actually be the preferred method, it’s far simpler, and eliminates any consternation you may be harboring over whether or not your scrolling animations will be blocky or frustrating on a mobile device. If you just can’t stand the idea of any user missing out on all your creative, animated, 3D silliness then read on.
Keep Parallax Scrolling Active On Mobile.
To get all your fancy-pants parallax functionality on your mobile device, you’ll have to work a bit harder. The results, however, are nothing short of stellar. The parallax scrolling in the link above actually adds to the content on either the mobile or desktop versions of the site, rather than distracting user attention or burning through user patience.
So how do you achieve such an effect when you create a responsive website? Well, the animated floating effects are a whole other story, but responsive parallax is as easy as 1, 2, 3, π, ∞.
…Okay, so it’s not super easy.
There are multiple solutions that seem to translate well across platforms, but the most comprehensive guide I’ve been able to find which describes the way to create a website that’s both responsive and immersive, is this open source API developed primarily by Alexander Prinshorn. Check it out, it renders impressively across most any screen.
2. Use Parallax Purposefully.
Now that we’ve gotten the technical stuff out of the way, it’s time to talk about practical website design. Parallax scrolling is often criticized as overused because it most certainly is. Some designers (though I’m sure I’m not referring to any of you fine readers out there) are prone to implementing a new design trend just for the sake of jumping on the bandwagon.
As a wise man once said, “there’s a time and a place for everything.” This holds especially true in website design. User experience should always be at the forefront of your mind. What you might think of as “dazzling” could just as easily be construed as “distracting” to an unimpressed user. So be sure your parallax scrolling implementations actually add something to the website you’re designing.
The moving pictures make me hungry, but don’t distract from the important content highlighted between high quality images, and always accessible from the sticky navigation bar up top.
Oh God, I’m So Dizzy.
Entirely too busy, and without meaning. The only thing parallax scrolling adds to this site is confusion.
3. Folded Menu.
This was almost too simple to include, but that last example made me feel I need to clarify the difference between visually epileptic and cleverly entertaining. Cyclemon.com is an often cited, but still valid case of clever and engaging parallax usage. The bikes are matched to personalities, which moves the user to make a personal connection to the content. The immersive elements on page serve to highlight the different personality types represented in each bike model.
4. Tell A Story.
An ideal immersive website gives the illusion of movement. Movements equate to actions and actions can in turn translate to plot twists, climaxes, exposition, and even resolutions.
The above screenshot is a blatant example of parallax that draws out an element of dramatic storytelling. The site is flatvsrealism.com, and it unfolds the tale of realisms dominance usurped by flat design. It’s highly entertaining, and culminates in a fun fighting game at the end. One should beware though, it is scroll heavy. If you can enable an automatic scroll with your mouse, I’d encourage you to do so.
5. Keep Them On The Page.
The biggest advantage that immersive sites can claim is an impetus for engagement. When properly designed, parallax elements exponentially increase user experience, gluing them to their screens like moths to a flame. Ahem… like less-dead moths to a flame. Fireproof moths. This is a terrible metaphor. Anyway, your users will find it hard to look away.
You can accomplish this with clever animations and a sense of antici…
First, you have to grab user interest with an interesting concept or fancy animation. The website for the Strkr mobile application does both. Right away you’re treated to an animated slider, and a quick introduction to the purpose of the application: to take you “straight to the heart of all the football action.” (This is a soccer application for all my fellow yanks out there.)
Then once you’re hooked in, interested in what else the webpage has in store, the fun really begins. It starts with more high-quality image animations which describe the ways to sign up and follow your favorite clubs in the Barclay Premier league. Then it goes straight for the jugular and has your parallax images in the foreground overtop of looping ambient video in the background; this is a great combination, and we’ll talk about it a bit more in a minute.
For now though, it’s enough to say that you can entice viewers into seeing more of your website by starting with a proposition, in this case an application, and then describing it in progressively more impressive designs as you scroll down the page. Doing so encourages user engagement, and intrigues them to keep going so they can see what happens next.
6. Highlight CTA's.
Ecommerce sites can also profit from a little parallax functionality. More and more landing pages are being implemented with parallax scrolling elements. In each of these cases, the end of the scroll path will lead inexorably to a CTA. In some cases, the CTA overlays the scrolling animations in the background, floating outward to grab user attention with GI Joe Kung Fu grip.
On the Lightfoot and Wolfville vineyard website, pictured above, the CTA comes in the form of an opt-in box sliding across the screen over the top of the parallax animated background. This produces a subtle yet noticeable effect of dragging user attention downward.
7. Complexity Is Obnoxious.
Recall above when I directed your attention to the muffi.pl webpage. It was busy, complex, and off-putting. The problem with parallax scrolling is it’s often so cool that people forget it’s only cool until the novelty wears off. Overuse might as well be the same thing as overwhelming as far as parallax scrolling is concerned.
Just as you might utilize white space to highlight an image or a block of text, use parallax scrolling sparingly so as to keep users interested, not overwhelmed.
Oh, and don’t forget that too many parallax elements may slow down your load times.
8. Make It Deep.
The whole point of parallax scrolling is to create the illusion of depth and movement. What’s the point if your site isn’t multilayered? Use parallax to make small images larger as the float to the foreground, or large images smaller. Play with distances to create your desired effect.
9. Think About How Your Site Will Interact With Older Browsers.
It’s easy to forget about Internet Explorer, and often times I wish everyone would. Yet it’s still the preferred default browser of the vast masses of computer illiterate folks across the globe. The thing you need to ask yourself is: “are any of the people in my target market going to be using IE?”
Oftentimes the answer is no. If that’s the case, then you’re all set. Unfortunately, a few of you may actually need a solution here, and adding misfortune to your un-fortune, there is neither an easy nor a one-size-fits-all solution. Learning whether or not your site will perform correctly on older browsers takes extensive testing, and furthermore every site will be different because there are different elements to load, animations, refresh rates, and so on.
Luckily a few select parallax implementations are supported on all major browsers.
10. Speed It Up With Preloaded Images.
Patience is a virtue. One that no one has ever taught the youth of this brave new world filled with numerous avenues of instant gratification. If you want to please these masses, you’d best follow suit and make sure you design a website that doesn’t take a fortnight to load up. One of the best ways to accomplish this is by preloading all of your heavier images (and even HTML pages in some cases).
Here’s a handy tutorial to help you get started.
11. Don’t Forget To SEO.
Ah, the inevitable snickers of the haters are presently reaching my ears. Let me stop them before they get started. As I’ve already exhaustively explained in a previous article, the misconception that immersive sites can’t be search friendly, is simply untrue. The fixes are complicated, but not impossible.
Ways To Implement SEO.
Here’s a crazy notion. Why not just make a regular website with standard SEO architecture and use plugins to implement parallax scrolling over top on a page or two? You can still highlight all your preferred elements, and benefit from regular old pagination.
- Separated content on page multiple meta tags
If it’s just gotta be one-page, then you’ve got to separate the page into sections that search spiders can recognize and read as separate content pages.
Either one is a valid solution. See how they’re done.
12. Implement Analytics Solutions.
Long scroll sites are notorious for lousy analytic measurements. This is because there are less ways to measure user engagement, but there are some easy ways to gather metrics on parallax sites. Here are a couple of options:
Specialized analytics package: ClickTale
JQuery plugin: Waypoint- executes an action whenever page is scrolled to a particular element.
13. The Mother Lode: Combining Video With Parallax Scrolling.
Our final tip is a doozy, one I alluded to briefly about 800 words ago. Full disclosure: some people are big antagonists of ambient video; I am not one of those people. I think ambient video is pretty damn cool. I also think the longer the trend is around, the better implementations we’ll see, and soon it’ll be just as prevalent a trend as parallax scrolling.
As it is there are plenty of examples of bad implementation, but when it works it works amazingly. Take a look at this ultra-professional offering from Whiteboard.is. It’s hard to get fancier than that. Think about offering it as an option to your next client and watch their eyes bulge with amazement.
That’s all for today kids. Do you think I left anything out? I’d love to hear about it in the comment section.
Brought to You by Webydo.
See how Webydo fits into your design workflow and business.
Request A Live Demo