30+ websites that prove parallax isn’t dead

Paddi Macdonnell.
July 17, 2015
30+ websites that prove parallax isn’t dead.
Parallax scrolling is defined as a site on which the background image scrolls faster than the foreground, creating the impression of depth. That rigid definition is at the root of most of the myths about parallax: it’s not suitable for multiple pages, it’s not suitable for large sites, it’s unusable on mobile, it’s a dated trend, it’s bad for usability, users don’t like it, it’s bad for SEO, I could go on… A better definition would be: Parallax scrolling is a site on which the elements scroll at different speeds creating a dynamic effect. Like anything, parallax scrolling is bad for a website when it’s done badly. But so many sites do parallax well. The parallax trend of a couple of years ago wasn’t really about parallax, it was about flat illustrations, scrolling forever to get to content, single-page sites with linear narratives. Those user experiences have dated, but parallax itself hasn’t because scrolling on the Web is natural. Modern parallax degrades gracefully, lazy loads elements, and contributes positively to user experience. Users need visual feedback for their interactions, and parallax scrolling is the perfect way to feedback on the Web’s most common interaction, scrolling.

Header parallax

One of the most common implementations of parallax scrolling is header parallax. Once your eyes see depth, it’s hard to unsee it, so to create the classic impression of depth, you need only introduce it in the header. Leaving the rest of your content to scroll normally.

Chris Roberts

thisisuncoated

Tim de Graag

timdegraag

Milan Design Week

designdo

Y7K

y7k

Kontor

kontor

Bill Byron Wines

billbyronwines

The Spaces

thespaces

Karen Atherley

karenatherley

Text parallax

Parallax is often used to improve UX, by keeping text content front and center while supporting content like images scroll past the user.

Fletcher Systems

fletchersystems

Industry Art

industryart

Apple

apple

Another Escape

anotherescape

I Like Photo

ilike-photo

Subtle parallax

Like the former riot grrrl whose sole nod to her teenage years is an over-enthusiasm for eyeliner on a Saturday night, parallax scrolling has grown up. Subtle parallax effects applied to a few elements create an elegant browsing experience that charms and engages the user.

Character

charactersf

Nutsandwoods

nutsandwoods

You Gotta Love Frontend

yougottalovefrontend

Hay Rosie

hayrosie

Harewood Estate

harewoodestate

Fixed point parallax

Fixed-point parallax is ideal for keeping the focus on your primary content. This kind of parallax is often achievable with CSS alone and produces efficient and functional sites. It’s an ideal technique for product demos.

Format

format

Fueled

fueled

Simon Foster

simonfosterdesign

Classic parallax

The classic, full on, parallax experience is still being produced. There are dozens of sites using it to great effect. Parallax is far beyond a trend now, it’s a natural effect on the Web, as these sites show.

Pirate

piratetoronto

L’Amour Fou

lamourfou

The Light Phone

thelightphone

Mélanie F

melanie-f

Penxo

penxo

FS Emeric

fsemeric

Rob Krar

robkrar

Velvet Hammer

velvethammer

Beagle

beagle

Callens & Clo

callens-clo

Paddi MacDonnell

Paddi MacDonnell is a designer and entrepreneur from Northern Ireland, follow her on Twitter.

Read Next

3 Essential Design Trends, December 2023

While we love the holidays, too much of a seasonal theme can get overwhelming. Thankfully, these design trends strike a…

10 Easy Ways to Make Money as a Web Designer

When you’re a web designer, the logical way to make money is designing websites; you can apply for a job at an agency,…

The 10 Most Hated Fonts of All Time

Remember when Comic Sans wasn’t the butt of the jokes? Long for the days when we actually enjoyed using the Impact…

15 Best New Fonts, November 2023

2023 is almost over, and the new fonts are still coming thick and fast. This month, we’ve found some awesome variable…

Old School Web Techniques Best Forgotten

When the web first entered the public consciousness back in the 90s, it was primarily text-based with minimal design…

20 Best New Websites, November 2023

As the nights draw in for the Northern hemisphere, what better way to brighten your day than by soaking up some design…

30 Amazing Chrome Extensions for Designers and Developers

Searching for a tool to make cross-platform design a breeze? Desperate for an extension that helps you figure out the…

Exciting New Tools for Designers, November 2023

We’ve got a mix of handy image helpers, useful design assets, and clever productivity tools, amongst other treats. Some…

The Dangers of Doomscrolling for Designers and How to Break Free

As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…

From Image Adjustments to AI: Photoshop Through the Years

Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…

3 Essential Design Trends, November 2023

In the season of giving thanks, we often think of comfort and tradition. These are common themes with each of our three…

30 Obsolete Technologies that will Perplex Post-2000s Kids

Remember the screech of dial-up internet? Hold fond memories of arcade machines? In this list, we’re condensing down 30…