Home > UI Design and Prototyping > 20 must-see examples of parallax effect websites
The best of parallax scrolling for web and mobile - get inspired and start designing your own parallax effect now

The best of parallax scrolling for web and mobile – get inspired and start designing your own parallax effect now

Web design trends come and go, but the parallax effect has, well, stuck around. Parallax scrolling has had a big impact on user interface design, on both websites and mobile apps.

From long and fixed position scrolling to horizontal and split-screen 3D effects, let’s take a look at 20 awesome parallax websites.

What is the parallax effect?

The parallax effect in web design creates a 3D scrolling effect as the user scrolls down or across the page. It’s one of the many scrolling patterns that allows you to adjust how your content is received by your users.

Derived from the Greek word ‘parallaxis’ meaning ‘alteration’, parallax can look like a sort of optical illusion – but really it’s just a special effect. In parallax web design, we slow down the rate at which the background layer moves, in comparison with the foreground.

Learn more about how you can apply a parallax design to your website with our guide.

When done well, the parallax effect provides a seamless user experience for your website or mobile app. This is what we mean:

1. The long scrolling parallax effect with Fluttuo

parallax-effect-parallax-scrolling-fluttuo-gif


Download Justinmind now and add the parallax effect to your prototypes

Download free


Sleek animation, a clean interface, contrasting nude and dark colors and a blend of ornate and heavy script typefaces make Fluttuo stand out from the eCommerce crowd. Adding parallax to the bag makes for a unique and complete online shopping experience.

With a background layer and another on top within a pre-loaded screen, the parallax effect is for the top layer to slide over the background. As the viewer scrolls, they take in the context and style of the jewelry site via the background aesthetics, whilst the top layer provides the product details and the main story.

The smooth scroll parallax effect is accompanied by hovering section heads and mini carousels. This is a highly interactive UI and complements the brand that is always ‘experimenting with new materials and innovative designs’.

2. A simple parallax scrolling homepage on Money Saving

parallax-effect-parallax-scrolling-money-saving-1

This banking site template features a sticky drop down menu, manual slideshow and a back to top button with its long parallax effect.

The UI template is minimalist in style, and is perfect for customization. It’s also responsive, which means users can enjoy it from their mobile devices as well as desktop.


Download Justinmind now and add the parallax effect to your prototypes 

Download free


3. ESPN: The long, strange trip of Dock Ellis

This clever design uses parallax effect in order to step up the visual storytelling of the article. ESPN did a great job at giving us a sense of depth with their layered elements, such as the large illustration of Dock Ellis and the body of text to the right.

header of website with parallax scrolling - example of ESPN

Once the user starts scrolling, there are different elements that separate the screen areas into normal text and quotations. The design in transition areas offer us a feeling of being close and personal with Dock himself, with an extra drama provided by the black and white photos of the baseball player.

4.  Bear Grylls

The adventurer that became world famous due to his Discovery Channel documentary on survival in the wild – has a fire website! Bear Gryll’s website holds parallax design at its core, offering the user a truly unique experience with several different elements that move slightly as you scroll.

example of parallax scrolling - bear grylls website

The design is smart, because even though all elements move in one way or another when we scroll down, at no point does the user feel overwhelmed because the movements are slow and quite short. This contributes to a real sense of depth and even transmits some of the feeling of being out in the open wild, with several important elements such as mountains and foggy tree lines in the background. Very smooth!

5. An introduction to the parallax effect with Dave Gamache

parallax-effect-parallax-scrolling-dave-gamache-gif

Dave Gamache’s parallax website demo is great for anyone just getting into parallax scrolling. When you scroll down Dave’s site demo, he shows us how to fade elements in and out upon scroll, how to pin layers, and how to rotate a mobile device with a horizontal slide effect on the mobile screen. Awesome!

Dave’s top tips for parallax scrolling:

  • Make it easy for all browsers to animate your parallax website. Focus on the most important properties of parallax animation, including scale, rotation and opacity.
  • Only animate fixed position elements, and do this sparingly – learn how to create fixed position elements in your prototype here.
  • Don’t go nuts on resizing images – browsers don’t always handle this very well

6. Interactive parallax design with NASA Prospect

parallax-effect-parallax-scrolling-nasa-prospect-2

NASA Prospect is an interactive experience that describes a story of planetary prospectors. NASA has sent them out to rediscover what mankind has left scattered across the solar-system after a global disaster.

Simple, interactive, delightful use of the parallax effect. The audio really helps to set the scene and is an enchanting addition to the design.

7. NY Times: Snow Fall

The NY Times has been known to invest some serious design effort into some of their articles. That is the case with the article by John Branch that regards the avalanche at Tunnel Creek, in Washington.

His design is clean and uses parallax scrolling to separate the screen into sections while offering us glimpses of the isolated and icy mountain top where the story took place. One could be forgiven for feeling a bit chilly just by having the article open on their screen – it has a wonderful immersive experience.

We particularly love that as the article develops, the website uses little cards with pictures of the people involved in the story, which show up next to their names in the body of the text as you scroll. For a long story with over 12 participants, that’s a very handy way to make sure readers don’t mix up the people in the story – makes for a nice visual effect, too!

8. Horizontal parallax effect with Hot Dot

parallax-effect-parallax-scrolling-hot-dot-gif

Hot Dot’s parallax effect is a little different: it’s horizontal. As the user scrolls, the page moves from left to right. Hot Dot’s site has a smooth scrolling easing effect, which is ideal horizontal navigation scroll. The background image isn’t fixed either, which is easier on the design team (and developers!).

This site works well with touch devices and ready for iOS and Android platforms. The horizontal parallax effect is ideal for responsive mobile-first design, where the user switches orientation from portrait to landscape on their mobile device in order to visualize the all the screen’s content.

9. 3D parallax effect with Hello Monday

parallax-effect-parallax-scrolling-hello-monday-1

Hello Monday sports a split-screen 3D parallax effect, featuring design cases down one side of the screen and their accompanying description and case details on the other. Each design case has its own look and feel.

The website design uses a selection of engaging transition effects which contribute to a seamless user flow along with a clean grid. This is accompanied by a mix of bright colors, beautiful images and bold typography.

10. Pitchfork: Glitter in the dark

Pitchfork created something truly inspiring in their presentation of their article on Bat for Lashes lead singer, Natasha Khan. The design is brought to us in black and white, giving a dramatic effect that agrees with the subject of the interview in her rock-star status.

Parallax design example - pitchfork music website

The music site used parallax effect to separate the screen into sections, and uses a smart design as we scroll down: the large pictures of Natasha Khan change with subtlety. It brings us in, as if we were there participating in the photoshoot with the singer. Beautiful and functional.

11. Simple parallax effect with Bearideas

parallax-effect-parallax-scrolling-bearideas-gif

We just love Bearideas parallax website – it’s so cool! A charming selection of UI background elements – some with navigation links – subtle transition effects and a simple long parallax scrolling effect make for a delightful interactive experience. The design team has used cards in a grid structure to visualize each of the company’s projects. Bold colors help to provide contrast between the cards.

A dropdown menu with just one navigation item adds to the simplicity of the design.

12. Anton and Irene

Design studio founded and directed by clearly talented designers Anton and Irene, serves as a great example of parallax scrolling done right. The website goes to show that you can implement parallax scrolling with bold elements, without overdoing it.

parallax effect example - UX design agency

We particularly love the bold colors and representation of the designers in futuristic clothes. It all comes together in order to deliver a website that is full of personality.

13. Another Escape

Outdoor lifestyle magazine Another Escape has a great website. It uses parallax scrolling to both separate the different sections of the website, but to also present us the main topics that the latest edition touches – getting the reader involved in the current volume of the magazine before we even get the magazine.

example of magazine website with parallax effect

The clean design leaves the user free to focus on the powerful images that speak to everyone who craves the freedom of isolated nature. It’s almost enough to make us all to pack up the office and move to a forest in Bavaria!

14. The 3D ‘lookalike’ parallax effect with Immersive Garden

parallax-effect-parallax-scrolling-immersive-garden-1

“We really like telling stories that touch people to appeal to emotion.”

Using parallax and rotations, Immersive Garden’s website gives the illusion of depth, 3D and immersion in the scenes without actually using 3D technology. Even though the interface is minimal, it is also visual and intuitive.

The website is made of lots of short video sequences that once loaded, can be played, paused and restarted by the user.

One of the most interesting things in this site is the organic cursor. Immersive Garden has used a variety of speed, scale and magnification effects to make it reactive and lively.

15. Immersive design with Valaire

parallax-effect-parallax-scrolling-valaire-2

Valaire is a great example of an immersive website. To launch their updated branding as well as their new album, they’ve gone all out on the user experience.  It’s not just a vertical scroll, it’s a story full-on story.

Their parallax effect is exceptional – connecting all user touchpoints for a complete user experience.

16. Enticing parallax effect with Cyclemon

parallax-effect-parallax-scrolling-cyclemon-gif

And last but not least, Cyclemon. This website is the cyclist’s dream. As you scroll down the page, you are met with a whole range of bikes in different environments. You’ll also see that each bike has a title, which describes what type of rider the user might be. This helps to give the viewer context and hopefully inspire them to convert – or so you might think.

In fact, this isn’t an online bike retailer at all. No, it’s a site owned by two graphic artists selling their artwork. This is a perfect example of how enticing the parallax effect can be.

17. This Oxford

This website focuses on the scientific brilliance of the city of Oxford, UK. The website uses parallax scrolling with division of sections – the past inventions that arose from the city, and the current promising research that will lead to innovation in the future.

header of example of website with parallax scrolling - oxford website

The parallax is implemented in a smart way, so that the user has the illusion of depth when the text moves at a different pace to the background image. No muss, no fuss.

18. Fueled

Mobile design and development agency, Fueled, has an incredible website. The use of parallax, combined with the bold colours contribute to a unique website that represents the agency perfectly.

mobile development agency website example - parallax scrolling at its finest

We fell in love with the mid-part of the homepage, in which as we scroll we are greeted by a phone screen that displays some of the agency’s top projects. But here’s the twist: as you scroll, you’ll see that intense changes in colors with parallax scrolling signify different projects, with the projects being shown on the same, unchanging phone skin. Creative and memorable!

19. NRLY

Nathan Riley’s website is a wonder. Cleverly designed, it uses parallax scrolling to make the very act of scrolling entertaining. Nathan’s work is showcased one by one, offering very little to get distracted by. We are big fans of the animated background, which uses the movement of rings of smoke to give the website a unique experience.

UX designer website example - parallax effect scrolling

“Good things come to those who scroll”? What a great way to start off the user experience as we slowly discover more about this (clearly) talented designer. Parallax scrolling, done right!

20. Gramercy Park Hotel

This website makes heavy use of parallax scrolling, using it to not only separate sections and create depth – it helps the Gramercy Park Hotel to showcase its strong points. The design uses card-like elements that move at a faster speed than that of the background, casually nudging the user to focus on that content first.

Fancy hotel website - example of parallax effect in website

 

Thinking about designing your own parallax effect? The best way to get started is to create an interactive prototype with parallax scrolling. Lucky for you, Justinmind has a complete pack of parallax features all ready for you to try out. Download Justinmind now and see for yourself!

Emily is Marketing Content Editor at Justinmind

2 comments

Your email address will not be published. Required fields are marked *

  • Thanks a lot for these useful tips. It will help me to improve my website according to modern trends. I’ve found additional information related to this topic: mlsdev.com/blog/161-web-and-mobile-app-design-trends-2018