How to Set Background Parallax Speed and Direction in Kadence Blocks (i.e., How to Fix Kadence Parallax)

Like most modern WordPress builders, Kadence Blocks has the ability to display backgrounds with the parallax effect; that is, when scrolling, the background will scroll at a different rate than the rest of the page. Usually, the background scrolls in the same direction as the foreground, but slower, to mimic real life where things that are far away seem to pass by slower when you’re moving in a car or train.

The Problem: Kadence Changed the Background Scroll Direction

This worked great in Kadence blocks until sometime around version 3.0, when they reversed the direction of the background scrolling so that it scrolled in the opposite direction as the foreground. I haven’t found any other example of parallax done this way. To me, it didn’t look right.

So, I posted in the Kadence support forum and they eventually got back to me and confirmed the change in direction, BUT, they said there was a filter that allowed you to adjust the speed and direction of the background parallax scrolling!! That’s exactly what I wanted!

The Fix

Here’s the filter (add this to your child theme or code snippet plugin):

// FIX KADENCE PARALLAX DIRECTION AND SPEED FROM BRIANSHIM.COM/WEBTRICKS
add_filter( 'kadence_blocks_parallax_speed', function() {
	return 0.5;
});

By default, the value is set to -1, meaning the background will scroll in the opposite direction of the foreground, which is NOT correct.

They said the original value (when parallax scrolling was working properly) was 0.5, so I gave that a try and it worked great! The background scrolls in the same direction as the foreground, but slower, which is exactly how it should be!

If you set the value to 1, the background will scroll at exactly the same rate as the foreground, which is the same as not having any parallax. The lower you set the value, the slower the background will scroll.

So, try some numbers and see what you like!

This might seem like a minor issue to some, but for me, the previous parallax behavior was unusable and made me start wondering about using Greenshift instead of Kadence. But with this fix, I’m thrilled!

Do you think this is nit picking or something worth fixing? Let me know what you think in the comments below. – Brian

Brian Shim

I am a freelance web developer and consultant based in Santa Monica, CA. I’ve been designing websites using WordPress and from scratch using HTML, CSS, PHP, and JavaScript since 2010. I create websites and web applications for businesses, nonprofits, and other organizations. I have a degree in Electrical Engineering (BSEE) from California Institute of Technology and a degree in Engineering Management (MSEM) from Stanford University.

brianshim.com