The parallax effect is when different layers of a web page move at different speeds as you scroll. Usually a background image drifts slowly while the text in front of it scrolls at normal speed, which creates a sense of depth, a bit like looking out of a train window where nearby fences rush past and distant hills barely move.

Used lightly, parallax on scroll can make a page feel polished and guide the eye towards key messages. Used heavily, it slows pages down, breaks on phones and can make some visitors feel genuinely unwell. Below we explain the main types, when the effect earns its place, the accessibility and performance points to get right, and how we add it to WordPress sites in practice.

Parallax works by moving layers at different speeds

Every parallax effect comes down to the same idea. The browser scrolls the page at one speed, and one or more elements are told to move faster, slower or in a different direction. Our brains read that difference in speed as distance, so slower layers feel further away.

There are two broad ways to achieve it:

• CSS only. The page’s styling tells the browser how layers should behave, with no extra code running as you scroll. This is usually the lightest option.
• JavaScript. A small script watches the scroll position and moves elements to match. This allows far more control (multiple layers, horizontal movement, effects that start and stop at set points), but it adds code the browser has to run on every scroll.

Most page builders and themes that offer parallax use one of these two methods behind the scenes, so it helps to know which you are getting.

The main types of parallax effect

Fixed background

The simplest version. The background image stays still while the content scrolls over it, so it looks like a window onto a fixed scene. It is often used on full-width banners between sections. In plain CSS this is a single setting (background-attachment: fixed), which is why so many themes offer it as a tick box.

Slow-scrolling background

Instead of staying completely still, the background moves, just more slowly than the page. It feels more natural than a fixed background and is what most people picture when they hear “parallax scrolling”.

Multi-layer parallax

Several layers (for example sky, hills, trees and a product in the foreground) each move at their own speed. It can look impressive on campaign pages and product launches, but it needs carefully prepared artwork and more code.

Element parallax

Individual items such as images, shapes or headings drift slightly as you scroll past, rather than a whole background. Subtle element movement is often the easiest way to add a bit of life without the downsides of full-screen effects.

Horizontal and scroll-triggered effects

Some sites turn vertical scrolling into sideways movement or trigger animations as sections come into view. Strictly speaking these are scroll animations rather than parallax, but they are often grouped together and carry the same risks.

Related reading: Common Web Design Flaws That Drive Users Away

When parallax helps a page

Parallax is a design tool, not a goal. It works best when it supports something the page is already trying to do.

• Breaking up long pages. A slow-moving image banner between sections gives readers a visual pause and signals that a new topic is starting.
• Telling a story in order. Product launches, event pages and “how it works” sections can use gentle movement to lead people from one step to the next.
• Adding atmosphere. Hospitality, venues, tourism and lifestyle brands often rely on strong photography. A subtle parallax effect on that photography can make it feel more immersive.
• Drawing attention to one thing. A small amount of movement near a call to action can draw the eye, as long as it is the only thing moving.

When parallax hurts more than it helps

Performance and page speed

Parallax sections usually rely on large, high quality images, and JavaScript effects add work for the browser on every scroll. On older phones that can mean jerky scrolling, delayed taps and pages that take longer to become usable. Google’s Core Web Vitals measure loading, responsiveness and visual stability, and a heavy effect can drag those scores down. If your page is slow, no amount of movement will make up for it.

Mobile devices

Many mobile browsers, including Safari on iPhone, do not support fixed backgrounds in the way desktop browsers do, so the effect is simply ignored or the image is scaled oddly. Touch scrolling also behaves differently to a mouse wheel, which can make script-based effects feel laggy. We often switch parallax off entirely on small screens and show a well cropped static image instead.

Accessibility and motion sickness

For people with vestibular disorders (conditions affecting the inner ear and balance), large on-screen movement that does not match their own actions can trigger dizziness, nausea and headaches. The Web Content Accessibility Guidelines include a criterion called Animation from Interactions, which names parallax as an example of non-essential motion that users should be able to turn off.

The practical fix is to respect prefers-reduced-motion. This is a setting on phones, tablets and computers (called “Reduce motion” on Apple devices and “Remove animations” or similar on Android and Windows). Websites can detect it and switch effects off for anyone who has asked for less movement. Every parallax effect we build checks for this setting.

Readability and focus

Text placed over a moving image can be hard to read, especially if the contrast changes as the image shifts. Too many moving parts also compete with each other, so visitors notice the effect and miss the message.

How to add a parallax effect in WordPress

There are several routes, depending on how your site is built.

The block editor

WordPress’s built-in Cover block has a “Fixed background” option. Add a Cover block, choose an image and switch the fixed background toggle on. It gives you the classic fixed background effect with no extra plugins, which makes it a sensible starting point.

Your theme’s settings

Many commercial themes include parallax options on header images, section backgrounds or rows. Check the theme documentation for what method they use and whether you can disable the effect on mobile.

Page builders

Most popular page builders offer scrolling or motion effects on sections, columns and individual elements, usually with controls for direction, speed and which devices the effect runs on. Some of these features sit in paid versions rather than free ones, so check before you plan a design around them.

Plugins

Dedicated parallax plugins exist, but each one adds code to your site. If you already use a page builder or a theme with motion options, use those rather than adding another plugin that does the same job.

The CSS approach, in plain terms

If you or your developer prefer to keep things light, a small amount of custom CSS can do the job:

1. Set the image as a background on the section you want to use.
2. Fix the background so it stays put while the content scrolls, or use a newer feature called scroll-driven animations to move it slowly as the page scrolls. Scroll-driven animations need no JavaScript, but at the time of writing they are not supported in every major browser, so the effect should be treated as a bonus rather than relied on.
3. Turn it off on small screens with a media query (a rule that only applies at certain screen widths), and show the image normally instead.
4. Turn it off for reduced motion with a prefers-reduced-motion media query, so the image simply scrolls with the page for anyone who has asked for less movement.

The benefit of this approach is that browsers which do not understand the effect just show a normal image, so nothing breaks.

Good practice we follow with parallax

• Use it once or twice per page, not everywhere. One strong moment does more than constant motion.
• Keep movement subtle. Small speed differences feel classy. Large ones feel like a theme demo.
• Compress and size images properly. Use modern formats such as WebP or AVIF and avoid uploading huge originals straight from a camera.
• Never put essential information only in a moving layer. Prices, phone numbers and key messages should be readable whether the effect runs or not.
• Check contrast. Add an overlay behind text if needed, and test it at every point of the scroll.
• Respect reduced motion and test on real phones. Not just a resized desktop browser.
• Measure before and after. Run a speed test before adding the effect and again afterwards. If the scores drop noticeably, simplify.

Frequently asked questions

Is parallax scrolling bad for SEO?

Not in itself. Search engines read the text and links on the page, not the movement. Problems come when parallax is used to build a single long page with all your content crammed in, or when heavy effects slow the page down. Keep separate pages for separate topics and keep the effect light.

Does parallax work on mobile?

Sometimes, but not reliably. Fixed backgrounds are ignored by many mobile browsers and script-based effects can feel laggy on touch screens. We usually turn parallax off on phones and use a static image instead.

Is parallax still in fashion?

Big, full-screen parallax is less common than it was, but subtle movement on images and sections is still widely used. The trend is towards restraint: small, purposeful effects that do not get in the way.

How do I stop parallax making people feel sick?

Keep movement small, avoid large areas of the screen moving at once and make sure the effect switches off when a visitor’s device has reduced motion turned on. That covers the people most likely to be affected.

Get motion that adds polish, not problems

If you like the idea of a parallax effect but want it fast, accessible and working properly on phones, our web team can help. We design and build WordPress sites from £895, with motion used where it supports the message. Take a look at our website design service or get in touch to talk about your site.