A Parallax Scrolling Guide: Best Practices, Examples and Tutorials

The idea of parallax design is simply an awareness of movement. More specifically, the word ‘parallax’ is used to describe the perception of distance between objects while moving along a line of sight. For example, the objects nearest to you in space will seem to move quicker and more dynamically than “background” objects.

So parallax is just a measurement of the difference in position between 2 points from the viewer’s perspective. Since the objects aren’t really moving it’s just a type of illusion like 2D animation.

Building onto this concept we now have a wide variety of design trends meant to replicate parallax movement on the web. In this guide I will to cover everything you could ever need to know about parallax scrolling and parallax design techniques.

Along with live examples I’ve also included some free plugins and code snippets to help developers create their own parallax effect for their own projects. If you make it to the bottom of this article you will also find a few links to the best parallax scrolling tutorial examples available to date.

One of the simplest ways to understand design is through examples. Let’s take a glimpse into specific trends used to create parallax design features in website layouts.

Parallax Scrolling Best Practices

The conversation on parallax design starts with an implication of dynamic effects. Unfortunately you simply can’t get animation to work in older browsers that don’t support newer techniques. Granted there are a few parallax scrolling effects which are easy to support but they still require a hefty amount of code. Fallback methods are quite important in the discussion of best practices.

When it comes to building a parallax website I’d suggest branching out from the initial concept. Recognize what you’re trying to accomplish and how you might go about doing so. Is there a particular reason the page should be animated? Should any graphics or typography also be animated? Parallax features work best in unison with an overarching theme.

Related: Brilliant Free jQuery Image Gallery/Slider Plugins

Sometimes you just want to animate scrolling effects because they look good and that’s perfectly acceptable. Depending on the type of parallax animation you might have backgrounds that shift or graphics that span the entirety of a page. I would suggest developing a fallback method which can work in all browsers even without animation effects. At the very least make sure visitors can still browse the static website.

To use a single relatable word to encompass all of this: simplify. Parallax scrolling can go from cute and fun to overly-complicated with just a few additions. Complicated can work if the content is still digestible. But overly-complicated is bad -it’s kinda like reading through the Code of Federal Regulations to find a specific clause written in legalese. Stay on course by designing effects that compliment the content & navigation.

Great Examples of Parallax Scrolling

Let’s start by covering a few good & bad examples and then delve into more specific techniques of parallax design. Generally speaking, a great parallax layout should tell a story. This doesn’t need to be in “once upon a time” formatting but it should clearly illustrate the point you’re trying to make.

I really like the example on Movement of Data which behaves like a parallax infographic. The site animates both up/down and left/right as you scroll through the content. It’s all very informative and the graphics help to tell the story rather than distract from it. While the effects are not extraordinary they do provide an efficacious storytelling method.

Another great parallax design can be found on BAKE Agency. The homepage animates in a circular fashion rotating through different sections of content. It’s not an exact parallax effect but it does incorporate the illusion of depth as the user moves through a line of sight. The reason I’d mark this as a great example is that it’s usable yet still creative and unique with a stylish implementation.

The goal of a parallax website design is to impress visitors while still maintaining all the customary statues of unofficial UX design law. Great parallax websites convey their message in an easily-consumed format while contributing to the digital art form. Motion is a big part of the design process so it’s important to think about how the page should animate, and if possible have a reason for that choice.

The greatest parallax websites make me feel like I’m interacting with the work of a professional designer. Look through the many examples I’ve provided in this guide and find the sites that make you feel comfortable. These websites can offer the best prototypical solutions for whatever parallax effect you’re trying to create.

Bad Examples of Parallax Scrolling

To expand your understanding of great design it helps to study poor-quality interfaces with unfriendly or obstructive features. The following examples may not be completely unacceptable but there are some facets of each parallax effect that make me frustrated as a user. And frustrating the user is a cardinal sin that should be punishable by 2 weeks of forced Internet browsing with an outdated version of Internet Explorer – let the punishment fit the crime right?

My first frustrating example is on Make Your Money Matter which is an informational page about Credit Unions. Let me state that I love their message and graphic design. The page itself is actually very well crafted. However, in regards to user experience, the page is quite limiting and uncomfortable. You can only scroll with the mouse wheel or by clicking & dragging the browser’s scrollbar.

This means the arrow keys don’t work and the page up/down keys also don’t work. To make things more confusing there aren’t any clickable links to slide around the different page sections. The only way to navigate is by tediously scrolling with the scrollbar and perniciously feeding that arthritis. The whole experience feels imprisoning and while the design is fantastic it simply cannot subdue such an annoying UX problem.

A polish website for the children network presents a side-scrolling parallax design with one glaring problem: the whole page is made up of images. Naturally you’ll ask “even the text?”. Yes the text itself, which could have been easily typed into HTML, was instead created with images. I was so terrified at this realization that evening I had to sleep with a nightlight.

The website animation is actually quite nice and even though I’m not able to read anything because Google can’t translate images, I have a feeling this site would be in my great examples list if it weren’t so textually-impaired. When creating parallax designs stay away from Flash animation and be sure to use images only for images. Actually that advice carries over into every type of website, parallax or not. You’ll spare your visitors quite a few sleepless nights questioning their own design ethics and sanity.

To finish up this section let’s go over just one more sample of difficult UX design. The website for South Australian Roadtrips has a quaint parallax slider with a few different pieces of content. While the text isn’t created using images you’ll still have a difficult time selecting or interacting with the text because it appears as part of the slideshow. This means you can’t easily copy/paste locations to search for them in Google.

But really my problem with this layout is that it’s too confusing. There is a top navigation with some buttons that animate between slides but they don’t feel smooth. The animation is slow and it seems like the content would be presented better without animated effects. I’m sure not everyone will agree with me but it brings us back to the concept of simplicity. Make the parallax animation(s) work for your content and not the other way around.

With all those complaints in order let’s move onto some brilliant examples of specific parallax effects.

Nice Single Page Parallax Design

The many different styles of parallax design tend to work well on single page layouts. A website using parallax scrolling could have multiple pages, but if everything can be presented on a single page it makes the browsing experience smoother. Animating on a single page allows graphics to change, backgrounds to move, and content to be much more flexible. The biggest problem is usually with Google search rankings but depending on the website this may not even be a problem.

One such example is the 10th year anniversary page for inTacto. It uses a guided rocket ship graphic to move along with the viewer. This creates the illusion of motion as background elements scroll along into the distance. You’ll also notice some tabs on the left-hand side of the page which allow for quick navigation.

I specifically prefer to have some control over the navigation process because it means I can skip around to different sections without the need to scroll. It also hints at the type of page content like with inTacto displaying their years of operation. The graphics are absolutely superb and I truly appreciate their sense of design. This is unquestionably one of the best single-page parallax designs I’ve ever seen.

Background Parallax Sliding

Parallax background effects are created when users scroll between different full-page content areas. Sometimes these will include animations but usually, it’s just a series of fixed backgrounds that move as you scroll past them. This may also be described as a displacement of each background image.

The homepage design for the Great Forest Park Balloon Race has a combination of moving background elements coupled with sliding backgrounds. Most of the time you’ll find content sections with backgrounds that clip off some of the top or bottom.

Not everyone likes the animation but it’s definitely one style of parallax design worth mentioning. It can be a little chaotic to also have graphics moving along the page but the GFP Balloon Race website does a splendid job.

For an example with lots of page content check out l’unita. It’s a restaurant site that uses page sections with fixed parallax backgrounds as you scroll. The photos are not meant to be 3D but they are supposed to create an illusion of scrolling lower on the page by shifting the background image.

If you look closely between each section you’ll notice one part of the page uses a drop shadow effect over the background images. The sliding backgrounds are meant to appear “beneath” the page as they slide under the drop shadow. It creates a simplistic level of depth that you would not expect from such a parallax design.

Background sliding is a very common style of parallax animation with content sliders and hero images. Some landing pages and startup websites utilize fullscreen background photos that slide along with the visitor. This can be a brilliant effect as long as it doesn’t overtake the content.

Horizontal Parallax Scrolling

Along with vertical content scrolling, there’s also the option to implement horizontal content scrolling. But then you may ask is it really parallax? Well depending on how the effect is created, yes and no. Also maybe. But horizontal motion is just another technique to create the displacement effect you’d expect from parallax websites.

The most common UX strategy is to support an up/down mouse scroll interaction but move the website side-to-side. Back in the day this effect was created with Flash but then we all grew up and moved onto better well-supported options – notably JavaScript.

Drug Treatment is an educational parallax website created primarily with graphics and snippets of content between page sections. The design is focused horizontally like a slideshow with circular link buttons for navigation. It’s one example of parallax design that works best on single-page layouts or landing pages within a website.

Looking over the homepage for Bomb Girls you’ll notice that it’s a weird combination of both scrolling methods. The page itself is designed vertically but the main content area moves horizontally. If you use the mouse wheel to scroll up or down it’ll move the content left or right accordingly.

This effect is created using plain HTML and JavaScript by placing certain elements into a larger container which cuts off at a maximum width. Then as the user scrolls, they get a gliding animated effect as hidden content comes into view. If you scroll in the sideways parallax section take a look at the browser’s scrollbar. You’ll notice that the horizontal content is also tied to the page height. This is a method of parallax design that isn’t as common but it’s very intriguing when pulled off correctly.

Graphics Animation

Animated website graphics are not anything new by any stretch of reality or imagination. But when combined with a scrolling effect we can get some really odd parallax features. The graphic-focused animation will usually update an image as the user scrolls down the page. Often times one image will stay fixed somewhere on the page and scroll with the user along a single page from top to bottom.

One of the most common effects is the animate-as-you-scroll page graphic. Take a peek at the Merry Christmallax page that animates a Christmas tree into view as you scroll down the page. This uses a combination of JavaScript for the motion along with replacement images via CSS. It’s a very well-crafted page design and it seems to convey a candid message of support for creative design techniques.

The bicycle-themed homepage for Cyclemon demonstrates a different kind of graphic animation. As the user scrolls between page sections a bicycle follows them along the page – however the graphic is perpetually replaced with different bicycle styles.

The graphics are exaggerated and hyperbolized to showcase a variety of two-wheeled vehicular designs for comedic effect. Check out the page and treat yourself to a giggle – it even includes that retro beauty known as a penny-farthing.

This style of parallax design is perfect for storytelling and drawing attention onto a single concept. Brand recognition can also be accomplished by focusing on a logo or branded item as it scrolls along with the user. Animated storytelling has been around since forever dating back to Walt Disnesaurus in the Triassic period. But just the idea of animating a story on a website feels cutting-edge and outside the boundaries of possibility.

You will notice an abundance of animated graphics on many of the examples throughout this post. If you have skills as a graphic designer it can be fun to build a little parallax project just to see what’s possible. When designing a layout with this parallax effect stay true to the core of the website’s message.

Motion-Sensitive Animation

This may well be one of the strangest parallax effects for aesthetic pleasure. Motion-animated backgrounds can be used in conjunction with the sliding backgrounds I mentioned earlier. But you can also find motion-sensitive parallax effects on websites just for the spice it adds to a design. One such example can be found on Batman 3D in the header image.

Note that everything in the photo will stay still as you scroll down the page. But once you move your mouse into that image area the photo start to move around relative to the mouse position. it’s a unique and interesting effect that isn’t always seen in the big wide world of web design.

Aside from page background sections, you might include this parallax effect for the shock/curiosity value or to create interesting & informative photos. The website for Digital Hands does not use a full parallax layout, but the top image does have a motion-animated parallax effect. Drops of milk in the foreground seem to move faster than milk in the background which corresponds to the general idea of parallax motion.

You may also like the example found on ego pop which is a creative design studio. Again you’ll see a difference in motion between objects closer and further from the viewer’s position. Since every computer monitor is a flat screen the effect is created using the illusion of depth – but this illusion is crucial for any parallax design.

While I really like motion-sensitive animation it may not be something you want to include in a parallax website. This effect is primarily used to improve the quality of a parallax design and strictly speaking it’s meant to add panache into a layout. There is very little practical use when it comes to content structure and user experience design. But it is a legitimate parallax effect that can add pizzazz to a page when executed properly.

JS Parallax Plugins

Delving into some parallax resources I want to provide developers with some tutorials and a chance to build their own animated effects. Thankfully open source development has revolutionized the way we build layouts by sharing code libraries for free. Sweet deal right?

The following plugins are mostly based on the jQuery library which is another free open source project. As long as you have a decent grasp of JavaScript it should be easy to recreate any effect you like. Working with a plugin saves hours or even days of coding from scratch – leaving you more time to actually build something truly magnificent.

ScrollMagic

An excellent plugin that has been used to design dozens of websites that contain complex structural presentations.

Parallaxify

A unique plugin of its kind as it is offered freely to be downloaded and applied to different websites according to your own preferences.

Parallax.js

It offers unique navigation experience as you can hover over to the different sections of the website by just moving the cursor to the desired position.

Scroll Path

A unique way to offer the presentations to the viewers and so the users enjoy the scroll-through till the end.

Skrollr

Another plugin which allows a beautiful contrast in the background and all the aspects appear to be in a nice rhythm with each other.

jInvertScroll

You can scroll horizontally and watch how parallax scrolling works at different times.

Scrolly

Smooth and firm scrolling to help the user concentrate on the content.

Stellar.js

This plugin offers variety of advanced features such as unique graphics and other styles of such kind to entertain the viewers to the best.

jParallax

This plugin will help you to demonstrate your motto or objective on the homepage of your website clearly.

Cool Kitten

This plugin will help the viewer to explore the site more quickly and efficiently.

Plax.js

The simple encoding helps the plugin to run smoothly on a variety of different niche websites.

Super Scrollorama

The text appears in different patterns in contrast to the background and it is similar to the previous plugins.

Free Code Snippets

Aside from building with parallax plugins you can also learn a lot by analyzing sample codes built from scratch. I’ve included a few basic examples which elucidate how to design parallax webpage layouts using JavaScript. All of the code snippets are free and open source which means you can reuse them or edit them for any project or merely for practice.

Parallax Hover

Auto-Scroll

Login Form

Scrolling Columns

Starry BG

Call to Action

Fullscreen Background

Graphics Scrolling

Background Motion

Blur on Scroll

Build-a-Face

Easy Parallax Effect

Parallax Scrolling Design Inspiration

While this post is littered with great examples I also want to include a showcase of parallax designs for inspiration. When creating your own website it helps to see what others have done and use that momentum to push forward with your own ideas.

In the gallery below you’ll find 25 parallax websites that use a variety of different methods to show off the techniques discussed in this post. Applying similar ideas into your own design process can be quite beneficial to the learning process. If you already have a strong grasp on parallax design I hope these examples can be scrutinized to help distinguish between effects you like and the effects you don’t like.

Soleil Noir

Kutikai

Inception Explained

New York Summer

Atlantis World’s Fair

Flat vs. Realism

Union

Pressels

Follow the Poppy

Every Last Drop

BAM Construct UK

La Moulade

Graus

Von Dutch

Interactive Infographic

Pacha Ibiza

Bata

Westinghouse Solar

Putzengel

Bagigia

Unisend

Rediscover Mario Kart

WanderWorld

Willians de Abreu

Parallax Scrolling Tutorials

Below is a list of some of the best parallax scrolling tutorials available to date. We we also published our own tutorial called “How to add an awesome parallax banner to your WordPress site” that you might also be interested in. Go check that out first! I also suggest the following:

Create a website with fancy scrolling effects

A CSS-only slideshow with background parallax effect

Simple parallax scrolling tutorial

Nikebetterworld Parallax Effect Demo

Static Webpage with Subtle Parallax Tutorial

Final Thoughts

I hope you’ve found this article useful and that you’ll take your new found knowledge of parallax scrolling and use it to make the web a better place. If you’ve enjoyed this article, please do me a solid and share it with your friends via Twitter and/or Facebook. Thank you!