Intro to Parallax Scrolling Websites

Parallax scrolling websites are crazy popular. If you haven’t seen parallax scrolling websites before, check out one of our other articles on parallax scrolling. We’ve written about it twice before. The first time we wrote about it to showcase parallax websites that used parallax to strengthen the website’s narrative. The second time was to take a look at parallax scrolling websites that work and some that don’t that design agencies designed for themselves.

It’s our opinion that the strength of parallax scrolling is that it allows for a designer to create more clear and engaging experiences for their site’s users. But, like any tool, it can be misused. And the way you misuse parallax scrolling is by either completely overdoing it and having too much distracting movement or by using parallax scrolling as wallpaper. It calls attention to itself. It’s like garlic, or banana in a recipe. A little bit goes a long way. (Side note: Don’t combine those two ingredients. Just… don’t.)

That doesn’t mean that parallax isn’t an attractive way to present information. Given a little planning, it can be a unique way to breathe life into your site (and more importantly your narrative).

Here are 5 CRAZY good resources for creating your own parallax masterpiece.

STEP ONE: LEARN HOW TO BUILD PARALLAX SCROLLING WEBSITES

A journey of a thousand miles begins with one step. And if you’re looking to build a parallax scrolling website, you might be in search of that first step. There are several good parallax scrolling tutorials on the web. I recommend going back to one of the oldest and best tutorials:

Behind the Scenes of Nike World

 

This tutorial gets recommended all over the Internet, and for good reason. For one thing, it was one of the original tutorials, as far as I know. This comes to us from way back in 2011, which might now sound like long ago to you but most people only had the iPhone 3 back then. Besides its age and longevity, it’s a damn good tutorial. The Nike World website was one of the first websites to really grab the attention of the press for its unique (at the time) parallax effect.

In this article Richard Shepherd takes us through the Nike World website and shows us how to create something very similar. Highly recommended.

Step Two: (Optional) Put up a Parallax Temp Page

If you’re fired up about parallax scrolling, you’re going to want something up as soon as you can manage. If you don’t yet know how to do parallax scrolling but you want to look like you do then check out this “fresh Parallax Under Construction Countdown” template on ThemeForest. It’s $6… so for the price of two cups of coffee, you get a nice parallax effect you can use right now.

Now, with your site on hold, we can get back to building a parallax website…

Step Three: Use These Parallax Scrolling Plugins

At some point you’re going to decide to skim the above article and get to work. There are plugins out there that will help make easy work of designing a parallax scrolling website.

SCROLLORAMA

The first thing you’re going to want is a plugin that makes the basics of parallax scrolling work. The one I’m working with is called SCROLLORAMA. It does just about everything you could want.

 

 

Transitions: Fade In, Fly In, Rotate In, Zoom In. You can pin it, then unpin it, do parallax and easing. Check out the demo for a great example of how all of this works.

SUPER SCROLLORAMA

If you need more, John Polacek made SUPER SCROLLORAMA and added some more neat parallax options.

 

 

It takes everything you love about SCROLLORAMA and adds Sliding, Wiping, Bouncing, Color Changing, Flinging, and Path Movement. It’s a great plugin to unleash your creativity!

If your needs tend towards needing advanced path movement and scrolling, jQuery Scroll Path is for you.

It’s a really nice plugin that lets you do just about anything you could want with an element on a screen. Take a look at the demo. The text follows a line (not visible to the end user) and can rotate, spin, and rotate gracefully around both arcs and hard angles.

WRAPPING IT UP

These links will get you squared away and ready to make your own incredible parallax scrolling website. If you start designing one, let us know in the comments!