Boring static web pages are so 2010. Luckily for users everywhere, parallax scrolling — and all of its interactive excitement — makes it so that visiting a website can be an multi-dimensional experience. The special scrolling technique features background images that move slower than foreground images, creating an illusion of depth. It became popular with old school side scroll video games (you remember Super Mario Bros, right?) and has only gotten more sophisticated.

Parallax provides a richer experience that can drive users deeper into your story and draw attention to where you want it. Usability guru Jared Spool says, “In the trade-off between hiding content below the fold or spreading it across several pages, users have greater success when the content is on a single page.” So parallax could be just what you need to increase the time spent on your site (so much to see!), and can help even a long-form news stories feel more immersive. Possible drawbacks could be long page-load time (blame image optimization and JavaScript) or difficulty with responsive design. Before going parallax, make sure you have a great story to tell and the time to do it right.

Our Favorite Examples of Parallax Scrolling

There are numerous flavors of parallax techniques — scroll transitions, y-axis animation, scroll triggered animations, scroll hijacking — that all lend themselves to improve the overall experience for the user. But since we’re not looking to open a can of interactive worms here, below are our favorite examples of sites that hit the nail on the traditional parallax scrolling head (not that we’re traditionalists; but we can be purists).

1. Madwell

madwell

As you scroll, a new section of the site is revealed where a variety of foreground and background elements move at different speeds, creating a traditional parallax effect. The multilayered cityscape section comes to life with a 3D effect. For an agency, this website definitely showcases their design and development talent.

2. Bomb Girls

bombgirls

This website is the bomb. (BOOM!) And it responds in a flash. (Bang!) Speedy, multi-layered, and educational, parallax scrolling is utilized to bring you different angles, perspectives, and dimensions. Normal scrolling direction is flipped on its side as you’re taken through the site horizontally, revealing more information about the show with every new pane. If you look closely, foreground elements move ever so slightly, creating the Parallax 3D. The attention to detail really makes this site stand out.

3. World of SWISS

swiss

This one is parallax on the z-axis (mind blown). Multiple background images and layers move as you scroll, creating a 3D effect that moves you along a timeline of the Swiss International Airlines. The mountains and clouds serve as a beautiful backdrop for this engaging story.

4. The Walking Dead

walkingdead

The Walking Dead comes to life! This website gives users behind-the-scenes info about the popular TV show in an animated comic book style website. As the character walks through each scene, the parallax effect is reminiscent of early side-scrolling video games. It’s informative, interactive, and well-designed; revealing just enough with scroll to keep you wanting more.

5. The Reykjavic Confessions

bbc

Parallax scrolling makes this BBC website seem movie-like as it documents the murder mystery of the Reykjavic confessions. Keeping track of the user’s scroll position allows different images to be loaded while you read, bringing extra context as you progress through the article.

6. Too Young To Wed

tooyoungtowed

Documentaries for the win! Once again, huge design is evident in this documentary-style website. Backgrounds are pinned and unpinned to the top of the page while the next section scrolls up, adding interest to the photography and design. Alternating pictures and text keeps the experience interesting. In addition, this site’s sidebar navigation lets you jump ahead (or back) to different sections.

7. Titanic

titanic

The ship might have sunk, but this site isn’t going down. On scroll, the submarine moves down the page as the background image moves up, creating a parallax effect as you dive into the deep ocean to find and learn about the Titanic. Also cool that eerie underwater music loops as fish and other sea creatures swim by.

8. Clement Zezuka – Hello!

clement

This website is like laying on your back and looking up at moving clouds… while a film strip plays in front of you. Fast loading, easy to use, and high impact, this site makes the most of parallax scrolling. It has a slower effect than the other examples, but note the animation at the beginning.

9. Mixpanel

mixpanel

This site packs a lot of punch with geometric elements moving at different speeds as you scroll, all the while whimsical dots in the background dance around the screen. This pageless design does  a great job at moving users slowly through the details about the event.

10. Boy-Coy

boycoy

This playful site has several layers of content, all adjusted to move at different speeds with a really nice easing effect that allows everything on the page to flow into view. This page is chock-full of delight! It’s almost impossible to not make it to the end of the story.

11. Digital Telepathy

dt

Oh hey, redesign of our own agency site. You’re lookin’ mighty fine. So maybe this isn’t the most ideal example of “traditional” parallax scrolling, but it’s in the family tree. And we get to determine the list since it’s our blog and not including it just seemed wrong.

Why Use a Parallax Effect?

Scrolling is easier than clicking. Parallax scrolling is changing the way websites are created, and when effectively employed, this feature can improve the user experience and call to action performance. And the future of parallax is continuing to get brighter advancements like this CSS-only parallax experience. Since CSS is hardware-accelerated, you can rest-assured this option will provide buttery smooth transitions to what could otherwise be a herky jerky effect (and no one wants herky jerky).

Did we miss any websites that use parallax in a kickass way? What are your favorites?

Comments
  • Alejandro Garcia

    Nice compilation of websites using paralax in this new way of interaction, but some of the sites doesn’t work any more 🙁