17 unique websites with parallax scrolling effects

Parallax scrolling is a popular trend in website design because it can make a design feel more exciting or immersive.

What is a parallax effect?

Parallax effects involve a website’s background moving at a different speed than the foreground content. This visual technique creates an illusion of depth which leads to a faux-3D effect upon scroll. 

While parallax effects can make websites feel more interactive and engaging, it’s important to note that excessive movement within parallax effects can cause harm for those with vestibular disorders. The illusion of movement and depth can cause dizziness or disorientation. 

If you use these websites as inspiration for your own, follow these guidelines for accessible parallax effect design:

• Keep the number of parallax effects to a minimum
• Constrain movement effects within a small area of the screen
• Include options for users to turn off parallax effects

Don't let your effects distract users from important information.

‍

17 examples of parallax scrolling websites

We've collected 17 parallax scrolling examples that may inspire you to use this web design trend in your own work.

1. Louie Sellers 

One of Louie Sellers' many talents, as a forward thinking UX designer, is his eye for interactions. Here in his online portfolio, he puts in a number of cool, attention grabbing visuals. First, there's the pen that uncaps and comes back together as you make your way from the top to the bottom.

Then there are parallax effects on each featured project. Hovering over a project fills out the outline with details and shifts the image, giving it a sense of three dimensionality. When foreground images move against a solid background color it makes them more prominent than when left static.

‍

2. Web design & art history

Not only does our web design & art history microsite guide you through how art has evolved and relates to modern web design, but it's also a gorgeous visual experience, full of brilliant graphics — inspired typography and inventive parallax effects. This isn’t only an in-depth exploration of art and web design, but an encyclopedia of scroll triggered animations. From straightforward scrolling text to more surreal visuals, this piece shows many great examples of parallax.

3. The Goonies

This wonderful homage to The Goonies, that loveable movie from the 80s, opens up with a stunning parallax that draws you into that familiar rocky Oregon coastline where the film takes place. This example of parallax doesn't involve too much complexity. By applying different speeds to the foreground and background images, and enlarging them a bit, this 3D effect grabs your attention.

4. OK Alpha 

We’ve praised the creative design agency OK Alpha in the past for their use of extra large typography and bold color choices. The eclectic colors and classic fonts pair well with the dynamic experience that the parallax scroll design technique adds to the overall website design.

5. Dockyard Social

While many restaurants throw up a basic restaurant website or rely on social media platforms to share their menu and business information, Dockyard Social goes beyond the bare minimum. The Scottish purveyor of comfort food and beverages packs various visual effects into their single page website, starting with header text in the hero section that breaks apart upon scroll.

‍

6. OnCorps AI

Heco Partners will pop up again later in this blog, as they’re well versed in taking visuals into unexpected and compelling directions. This web design they created for the data analytics company OnCorps, begins with a scattered flock of dots that come together into a bell curve, representing so well what they do with data. This site makes great use of parallax scrolling effects with a layout full of floating shapes and animations.

Heco Partners will pop up again later in this blog, as they’re well versed in taking visuals into unexpected and compelling directions. This web design they created for the data analytics company OnCorps, begins with a scattered flock of dots that come together into a bell curve, representing so well what they do with data. This site makes great use of parallax scrolling effects with a layout full of floating shapes and animations.

7. Jomor Design

With a smart layout, unique microinteractions, and plenty of wit, this portfolio from Jomor Design shows that it’s possible to find the right balance between functionality and personality.

From the lightly shifting text, to the numerous parallax effects touching its visual components, everything comes together for an effortless user experience. The designer behind this site, Jonathan Morin, interjects humor with playful remarks like  “78% of my clients say I’m a genius. The other 22% say I’m a sexy genius.” This along with a number of other funny lines makes this more than just a portfolio of his work, but rather a representation of who he is.

8. Parallax Template

Parallax Template by Jerome Bergamaschi is an explosion of color right from the start.

This template includes a brightly colored scene — green fields, magenta cliff sides, and orange and pink clouds — with subtle motion. Upon scroll, the dark grass at the bottom of the scene appears to move up, changing the background to black. It’s a great example of fluid parallax scrolling done well.

‍

9. Weglot

Weglot expands the reach of Webflow, letting designers create multilingual sites without having to know another language. This gives you the opportunity to break the language barrier and design for clients around the world.With some of the best parallax effect storytelling and interactive elements like the prompt to click and break the language barrier, this site really keeps you scrolling.

‍

10. Avenir Creative

Avenir Creative makes for the second entry on this list from web design studio Heco Partners. As soon as you start scrolling on the homepage, the text in the menu shifts to a 45 degree angle and spreads apart to make room for the Avenir logo to sit in the middle.

What’s especially impressive is how they translated this effect to work similarly on mobile devices. Rather than crowd the smaller screen with the large logo amongst the menu items, the text in the menu slants but does not expand, then remains sticky at the top of the page as you scroll down.

‍

11. Plink Webflow Rebuild

Creator Andreea Encutescu was intrigued by the interactions on the official Plink website and decided to re-create them in Webflow. Andreea rebuilt the site for educational purposes and even made the project cloneable for anyone who wants to experiment with it.

In addition to the parallax scroll effects, you’ll also see 3D illustration and animation and a custom cursor. Andreea also shares tutorials on YouTube for anyone who wants to learn more about how they recreated this site.

 12. Agency In The Wild

Agency In The Wild combines oversized text and slick scroll triggered animations for a stellar agency website. There's a novel user triggered parallax in the form of a shifting addition symbol, combined with a list of who they've worked with. Some of the best parallax effects serve no practical purpose, but make designs stand out. Plus, the large text encourages site visitors to keep scrolling to read more while the parallax effects deliver an intriguing user experience.

‍

13. Vectary

Vectary offers a platform for creating AR and 3D images. Everything from cartoon characters to photorealistic product representations are all possible with their software. There’s plenty of 3D styled graphics occupying this layout. But along with these, they add a few parallax effects shown below — further adding energy to this design. 

‍

14. Creative South

Creative South, a design conference in Columbus, Georgia puts together an event with an impressive roster of speakers and workshops for creatives. Subtle shifts in the background illustration make this website feel like you’re diving into a comic book. The website captures the creative spirit of the event with fun parallax effects, including one on the homepage that makes it look like a hot air balloon is taking flight.

15. Digital Bake 

If you’re a Webflow designer and haven’t checked out Aaron Grieve’s library of cool and practical Webflow elements on the Digital Bake, you should. This inventive and smooth layout full of parallax goodness gives you another reason to head over and check out all he has to offer.

With a cool array of shapes, and space for your own content, this is a great design to clone for free and play around with. You can even change the colors and customize it however you’d like for your own designs.

16. IX2

Parallax effects are a part of Interactions 2.0, so why not cover the history of web design that got us to this point by incorporating interactions, including parallax effects? This brief history of the web takes you through the invention of the internet through Interactions 2.0 with 90s web design throwbacks, horizontal parallax effects, and scroll-triggered animations. 

17. Dutchman’s Gold

If you’re looking for a free cloneable to get started with parallax effects, this project from Webflow’s own Nelson Abalos Jr provides a solid foundation. This simple project with 8-bit style visuals was designed to be studied — clone it and deconstruct it to practice your parallax skills..

Getting started with your own parallax scrolling designs

If you haven’t checked out our Webflow University, we have a full course on interactions and animations that shows you how to create a parallax movement on scroll. Instead of having to write HTML, CSS, and JavaScript, you can use Webflow to visually develop your parallax effects with no code.

You can also check out this video to get an idea of what you’ll find in the course:

Or, if you want to get started right now, grab a cloneable from Made in Webflow and start playing around with parallax effects.