The parallax effect today holds a significant place among web design trends, and scrollable pages with this effect or a single large animated image are commonly seen on websites of various topics and companies of different sizes. However, while many webmasters successfully implement parallax, it’s just as easy to misuse it and undermine the overall design concept of a project. Moreover, there are so many ways to work with parallax—from using video files to coding everything from scratch—that designers often spend hours debating how best to integrate the effect into a website. Ultimately, it all depends on the type of effect and the project.
Let’s try to figure it all out, and most importantly, understand how to create this effect and how it differs from regular animation.
The Mysterious Parallax
The term “parallax” refers to the movement of objects when viewed from different angles. It was originally used in 2D games, where background images moved significantly slower than those in the foreground—thus creating a sense of depth. In today’s gaming industry, the term “2.5D” (like in AC Chronicles) is often used to describe this type of visual style. It’s not fully 3D nor flat 2D, but rather creates the illusion of depth. This illusion first appeared in the 1982 game Moon Patrol. Who could’ve imagined that three decades later this effect would become so popular among web designers!
Websites have come a long way—from simple flat designs to nearly three-dimensional experiences. Thanks to HTML5, CSS3, and modern browser technology, parallax is now widely used. Here are some striking examples: madebyfew, Myriad, firewatch, madwell.
Mobility
Every year, more and more users rely on mobile devices (smartphones). Unfortunately, the parallax effect—especially the kind based on scrolling (like the examples above)—doesn’t work on them. So, you’ll need to create an alternative or abandon the idea entirely. For instance, websites like packwire and madwell simply won’t display the necessary graphic information—or won’t open at all—on mobile, while they work flawlessly and “fly” in desktop browsers or on tablets.
Not Just for Show
Don’t use parallax just for the sake of having it on your site. Greensplashdesign or r-magazine could’ve done without it. The meaning and visual appeal wouldn’t have suffered, and it wouldn’t improve user experience either. On the other hand, projects like lebledor and highway-one-roadtrip actually benefit from the presence of parallax, as it makes exploring the content more engaging and allows for better perception of certain details.
A Storytelling Journey
Parallax—and especially parallax scrolling—has the power to greatly impact visitors emotionally. For example, it can guide the viewer through a story or a timeline. The project unoeilausommet offers not just a look at parallax, but an interactive experience with it: calculating altitude above sea level, navigating across mountain ranges with your cursor, and more.
Image Preloading
The more parallax effects a site has, the more images it needs. And the more high-quality, large images there are, the longer it takes for the site to load on the user’s side. To avoid overloading the site or the visitor’s bandwidth, it’s better to preload images and only then let scripts execute the animation. This is well illustrated in the soul-reaper project.
Implementing Parallax
Sometimes webmasters mistakenly use the term “parallax” when they’re actually just swapping one informational layer with another while the background smoothly “slides” off screen. But the essence of parallax is the change in an object’s position relative to the background depending on the viewer's perspective.
To implement it on a website, designers usually consider these factors:
Projects like spaceneedle, kasatkavodka, parallax.js are beautiful examples of true parallax, with and without scrolling. Scroll-based parallax looks especially cool as different layers move at different speeds, creating a pseudo-3D effect.
If there’s no desire or reason to build an interactive project, but you still want the parallax effect, some web designers use video in a convenient format. The background is created as a video showing 2.5D animation, with text, buttons, and sections layered on top.
Parallax Scrolling Plugins
To create scrolling parallax, designers usually use jQuery plugins.
Using Photoshop
We won’t describe the full technical process of implementing parallax scrolling on a website. You can explore plugin documentation and examples for that. Instead, let’s talk about how to create parallax in Photoshop.
Why?
At the very least—to prepare beautiful background photos, videos, and styled elements. Describing everything in terms of JavaScript/jQuery may not be ideal, but adding a photo or video parallax effect is faster and easier. For instance, the project Aimiam.com uses lightweight background parallax animation, as seen in panoramic or 360-degree projects.
Watching the video below shows how photos are transformed with parallax. But can you even tell them apart from video? This isn’t a “live photo” effect—it’s a whole new way to transform visual content.
Variations of the 2.5D effect. A completely different execution and meaning.
First, choose a photo with a clear foreground object. There may be multiple objects, and they can move at different speeds. In our case: a plane taking off from a runway. Choose a large, high-quality image—after scaling, it should still look good.
Open the image and carefully outline the plane using the Pen or Magnetic Lasso tool, or any other selection tool. Include all the details. Right-click and copy the selection to a new layer.
Now click the object layer and load the selection (Ctrl+left-click). With the selection still active, switch to the background layer and choose Select → Modify → Expand to enlarge the selection edge. This improves fill quality.
Still on the background layer, go to Edit → Fill, and in the pop-up window select “Content-Aware.” Now the background is cleaned up and the photo is split into parts: the plane and the runway/sky. Repeat this process for any other objects involved in the animation.
Create a new document slightly smaller than the image (e.g., if the image is 800px wide, use 500px). Copy all layers into the new file. Right-click and choose Duplicate Layers.
In the new canvas, if you move, for example, Layer 1, it will shift freely and no longer fit fully onto the background—giving it room to scale.
Convert both layers into smart objects and open the Timeline (or Animation panel).
Now let’s get creative. Click Layer 1 on the left and select Perspective. Place the first marker at the start of the video timeline. Select the layer with Ctrl+T and scale it down to fit the canvas. Confirm the transformation.
Move the blue timeline arrow to the end and set the second Perspective marker. In Free Transform, scale the layer up—just slightly. We’ve nearly hidden the runway.
Do the same for Layer 2—transform and move it, setting two keyframes. But this layer should scale up more than the background.
If your image features, say, 2–3 cyclists on a road, you can animate the first one riding by and disappearing, then pan slightly to the second. The background should move slowly.
Now save the animation as a GIF or MP4 and it’s ready to use.
This is the simplest way to create a 2.5D parallax effect. You can also add rain textures on top, rotate them slightly, or animate mountains and auroras—have them rotate slowly clockwise. Instead of scaling up, you can also scale down—movement varies.
The effect still gives the feeling that the viewer wants to peek “around the edge” of the object. These images intrigue and keep users on your site longer. How could you not look?!
The key to parallax success is smooth object motion. Background = slower, Foreground = faster (hence scaling the plane).
More beautiful examples: pollenlondon, soundscape, zameckezahrady
Personal Experience
To understand how parallax works in real life, let’s do a simple experiment.
You’re sitting in front of your monitor, with a wall/window/plant behind it—any large object.
Sit upright, relax (this isn’t hypnosis). Let your gaze soften, looking not directly at the monitor, but at its side, just below the top corner.
Once your vision relaxes, turn your head slightly, still looking at the edge and catching a glimpse of the wall. Move gently side-to-side. It may seem like the monitor is also moving slightly. That’s parallax. Imagine someone running in front of the monitor...
The foreground monitor creates a sense of depth, and you perceive it as moving. Without it, the wall feels flat and uneventful.
If you freeze and focus on one point (still the monitor edge), then alternately close one eye and open the other, you’ll see a shift in how the scene is perceived. Open both eyes—and the depth fades, but you see a complete picture. That’s binocular vision.
This exact principle is used to create parallax in web design and Photoshop. Objects move smoothly, creating depth. Without it, it’s just overlapping blocks of content.
Conclusion
The parallax effect and parallax scrolling will remain popular in web design for a long time. Whether or not to use it is up to the webmaster and client. But one thing’s for sure—well-crafted parallax animation grabs attention just as effectively as a good photo.
What matters most is understanding the core of the effect—what parallax is and how it works. Then all that’s left is to break objects into layers and set the appropriate speeds. How fast? That’s up to the designer’s imagination. It’s another visual style that inspires designers to play with speeds, objects, and effects.