How To Create Parallax Scrolling

Digital screens may be a two-dimensional space, but web designers have found techniques to sculpt their flat pixels into having a sense of depth and dimensionality. This is where subtle parallax effects can come into play.

Parallax scrolling effects add action and the illusion of depth by taking different visual elements and moving them at different speeds in a website design. Some may move faster, others may move slow, while a few may stand still.

Utilizing parallax is a design technique that can be used to add some variety, or have more practical applications by showing someone something important. In this post, we'll go over some examples to help you get inspired. On top of that, we'll show you how to use these concepts to build something beautiful for the web.

However, note that too much 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 do use these websites as inspiration for your own, remember to follow some of these guidelines for accessible parallax effect design:

Keep the number of parallax effects to a minimum
Constraint 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

25 examples of parallax scrolling websites

We've collected 25 examples of websites with parallax scrolling effects 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. Alex Dram

Landing on Alex Dram's UX/UI portfolio homepage, you're greeted with a minimalist array of purple triangles and a few words about who Alex is as a designer. But with just a tiny movement down the screen, these shapes pull into an arrow-like configuration, headed straight into the planetary-like landscape that unfolds before it. Alex's use of parallax scrolling brings someone along the journey that is the galaxy of his work.

This three-dimensional sleight of hand happens through parallax, while the visual move at different speeds. We love seeing parallax used for artful purposes, and this does so much in giving this website a unique spacey atmosphere.

3. 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.

4. The Goonies

This wonderful homage to The Goonies, that loveable movie from the 80's, 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 hand and leads you straight into this web design.

5. 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. But adding to this eclectic assemblage of color and text are parallax effects that take what could have been a long flat scroll, but are turned it into a dynamic experience with movement and depth.

6. Dockyard Social

It's easy for restaurants to not want to put a ton of effort into their websites. And we get it. What's on a customer's plate is way more important than what's on a computer screen. But Dockyard Social, a Scottish purveyor of comfort food and beverages, goes way beyond the bare minimum that so many restaurant websites succumb to. Along with a compelling color scheme, parallax effects add to the personable yet quirky vibe of their website.

7. 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. Scrolling down reveals a layout full of floating shapes, animations, and parallax effects.

8. 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 design and personality.

From the lightly shifting text, to the numerous parallax effects touching its visual components, everything comes together for an effortless user experience. Jo also interjects just the right amount of humor along with his design work. He describes himself as, "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.

9. Timeslot

Timeslot takes an interesting angle with its social media platform. They want people to share their calendars of what they're up to, and to connect with their friends in making future plans. They focus on how technology can bring together people in sharing experiences, instead of sitting by passively.

Timeslot uses horizontal parallax to help tell the story of how their app works for their users. At the top of the page we see a layered stack of people's photos. As you scroll down these individuals are pulled together, and brought onto the screen of a smartphone. This strong visual represents a fantastic metaphor of what their app aims to do in connecting people.

10. Weglot

Webflow lets anyone be a designer, with no code visual platforms putting the tools in front of you to create — unhindered by programming. Weglot further 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 across the world.

Weglot's website opens up with a globe that is pulled apart. A downward scroll brings these parts together. This symbolism of how their software can bring in foreign clients, that otherwise would have been out of reach perfectly, captures the essence of what their software does.

Parallax effects can work for subtle shifts in a design, or where you want to make a bigger impact, like what Weglot does in this disconnected world animation.

11. STEEZY Studio

STEEZY Studio wants you to get in your daily exercise through busting some moves. They offer video courses for dancing that are more than just hitting play on a video. They let you choose different angles, loop movements, and options to study dances in-depth.

There are a couple parallax effects used throughout the design, but the most eye-catching is this accordion styled effect below. They lay out the classes of a particular dance course on an angled plane. Not only is this more interesting than a horizontal grid of screenshots, but it also saves space.

12. neueform

neueform is the webspace of Andres Jasso's lo-fi, hypnotic, R&B inspired electronic music. Not only does he have skills as a producer, but he's also a designer — and it shows. He's created a minimal, almost brutalist black and white music website design to showcase his songs. There's an eye catching parallax at the very top that touches a cylindrical grid. It's a small effect, but really makes this shape jump from the screen. This is another example that parallax effects don't have to be overdone, but even tiny movements can add so much to a design.

13. Avenir Creative

Avenir Creative makes for the second entry in this list from Heco Partners. Where their other design in this blog for On Corps has a bubbly geometry, their work for the design agency Avenir Creative takes a more angular approach. Along with this skewed geometry are a number of parallax effects adding to the eccentric and unique feel of this agency's website.

14. Terusama

Terusama, a supply chain management platform, uses parallax on the parade of smartphones and screenshots that occupy the right hand side of their design. It's an effect that may not even register with non-designers, but we certainly noticed it. By varying the speed of these visuals it creates a nice break in congruity.

15. Downtown Bentonville

Are you going to be spending any time in Bentonville, Arkansas? If not, you should — this page shows there's plenty awesome things happening there (goat yoga, anyone?).

There's a good deal of content here, but also a few scroll triggered effects to mix things up — including parallax which makes it an easy user experience.

16. UDX Bike

UDX Bike offers electric BMX bikes that look like they can take some serious action.

The product photography captures the details and rugged beauty of these bikes, with each one angled against a monochromatic background. This would have been enough for these BMX bikes to stand out, but a parallax pushes them further, demanding you to take notice.

17. 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 effects serve no practical purpose, but make designs stand out.

18. Superlab

With bright geometric shapes, captivating animations, and an upbeat aesthetic, Superlab's agency website doesn't lack in creative flair. Parallax is applied to each featured project, giving each a small push — creating contrast with the static elements in the design.

19. Custom Web

So, we don't have much to go on about what this Webflow design for an app is all about, but what's here parallax wise is well worth mentioning. Every section of this layout has an animated effect livening the space with movement. There's a liberal sprinkling of parallax throughout, giving it much needed depth and dimensionality.

20. 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.

21. Creative South

Creative South, a design conference in Columbus, Georgia puts together an event with an impressive roster of speakers and workshops for creatives. And this website, with its quirky illustrations and organic textures, captures the spirit of their conference. Scrolling through, there's a number of parallax effects, moving the elements of the colorful landscape that makes up this design.

22. 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, you can clone this for free. You can even change the colors and customize it however you'd like for your own designs.

23. IX2

Parallax effects are a part of Interactions 2.0. This is a natural progression of web design, where user actions guide the way through scrolling and micro-interactions. This guide takes a look at how far interactions have come today, using a number of cool parallax effects along the way.

24. Parallax

Okay — it's right in the name. But this example, and free to clone, is a textbook example. With shifting layers of stars and misty mountains, this gives you a straightforward lesson in how to put together something similar on your own.

25. Dutchman's Gold

From the ever prolific Nelson Abalos Jr, this is another parallax scrolling project from the Webflow Showcase. This takes the theme of the Lost Dutchman's mine, rendered in layers of 8-bit style visuals. We like the wacky sense of experimentation, and this is another Webflow design you can clone for free and deconstruct how it was put together.

Getting started with your own parallax scrolling designs

We've certainly covered many different styles of parallax effects, but there is so much more possible. We know you're probably wondering how to jump in and start using these in your own 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:

If you have any questions, feel free to leave a comment below or post up in our discussion forum — there's a community of Webflow designers ready to help.