1
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
Tim de Graag
Milan Design Week
Y7K
Kontor
Bill Byron Wines
The Spaces
Karen Atherley
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
Industry Art
Apple
Another Escape
I Like 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
Nutsandwoods
You Gotta Love Frontend
Hay Rosie
Harewood Estate
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
Fueled
Simon Foster
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
L’Amour Fou
The Light Phone
Mélanie F
Penxo
FS Emeric
Rob Krar
Velvet Hammer
Beagle
Callens & Clo
20 Best New Websites, October 2024
Something we’re seeing more and more of is the ‘customizable’ site. Most often, this means a button to swap between dark and light themes, but the options are starting to…
Exciting New Tools for Designers, October 2024
We’ve got goodies for designers, developers, SEO-ers, content managers, and those of you who wear multiple hats. And, of course, it wouldn’t be October without a Halloween themed font. Enjoy!…
20 Best New Websites, September 2024
Welcome to this collection of what has been catching our eye on the web over the past month. We have a mixed bag for you with both minimalist and maximalist…
Exciting New Tools for Designers, September 2024
Welcome to September’s toolbox. This time around we are aiming to simplify life, with some light and fast analytics, an all-in-one productivity dashboard, an excellent project scope management tool, and…
20 Best New Websites, August 2024
Welcome to our collection of sites to inspire you this month. The overarching theme in this selection is simplicity. Minimalism never really goes out of fashion and with good reason;…
3 Essential Design Trends, August 2024
There’s something new to learn with each of this month’s featured website design trends. Let’s dig in! As all the youngsters prepare to go back to school, you can tackle…