SPECIAL OFFER Get 30% OFF on All Qode Plugins Discount code: WOOCOMMERCE30 SPECIAL OFFER Get 30% OFF on All Qode Plugins Discount code: WOOCOMMERCE30 SPECIAL OFFER Get 30% OFF on All Qode Plugins Discount code: WOOCOMMERCE30
SPECIAL OFFER Get 30% OFF on All Qode Plugins Discount code: WOOCOMMERCE30 SPECIAL OFFER Get 30% OFF on All Qode Plugins Discount code: WOOCOMMERCE30 SPECIAL OFFER Get 30% OFF on All Qode Plugins Discount code: WOOCOMMERCE30
BACK TO TOP

How to Create a Parallax Effect in Slider Revolution

How to Create a Parallax Effect in Slider Revolution

This article is part of our ongoing series of Slider Revolution tutorials. You can find all the articles from this series in our Comprehensive Slider Revolution Guide.

Parallax is a popular effect that adds an impression of depth and dynamicity to the visual content of your website. There are a lot of great premium WordPress themes with parallax effects integrated and you’ve probably seen the effect a thousand times across the web. But you might have wondered how it was made.Today we’re going to talk about using the parallax effect in Slider Revolution sliders.

What is Parallax?

Parallax can roughly be defined as an effect in which elements in the background and those in the foreground move at different speeds when the user scrolls, creating an illusion of depth. Specifically, elements in the background are set to move slower. Below you can see an example of parallax from our Aoki theme.

Parallax Effect in Slider Revolution

There are different ways to achieve this effect, and if you’re already working with Slider Revolution you’ll be glad to hear that this plugin packs the required functionalities for creating parallax.

How to Enable Parallax in Slider Revolution

First things first – head over to Slider Revolution and turn the parallax on. Go to Module General Options > On Scroll > Scroll Based Features > Parallax and turn the Parallax Enabled switch to On.

Enabling Parallax in Slider Revolution

The plugin offers a number of different depth values so you can pick the one that works for you. If the value you’re looking for is not here, you can enter your own, as shown below.

Scroll Based Features

How to Add Parallax to Background Images

To add the parallax effect to your background image, go to Slide Options > On Scroll > Parallax & 3D Settings, and choose the preferred depth from the dropdown.

Enabling Parallax in Slider Revolution

When it comes to picking the depth, there’s no golden rule. We suggest you try out different values to see how they work on your page. Different depths will create different effects, so try them all out until you find the perfect effect for your page. If you don’t feel like experimenting, the ones in the middle are always a safe choice.

That’s pretty much it for the background.

How to Add Parallax to the Layers

The Slider Revolution parallax effect is not reserved just for the background images. You can also use it for the individual layers inside your slider. With this effect, you can give your users an illusion they are controlling parts of your slider by moving their mouse. This is a really neat effect, and it’s very easy to set up.

Select your layer, go to the Layer Options > On Scroll > Parallax & 3D tab, and choose the desired level of depth.

Adding Parallax to the Layers

And that’s really all there is to it. The result will be the layer with parallax that activates as the mouse moves.

Themes with Slider Revolution
WebOn banner
WebOn

Landing Page WordPress Theme

Borgholm Marketing WP Theme
Borgholm

Marketing Agency Theme

Sante banner
Santé

Organic Shop Theme

In Conclusion

As we saw, whether we are talking about individual layers or background images, adding the Slider Revolution parallax effect is extremely simple. Bear in mind, though, that not every slider needs parallax. Very dynamic sliders with lots of animation will probably do better without this effect, as the result may turn out to be too busy or cluttered with motion. For simple sliders, though, parallax can be just the thing you need to spice up your page.

Post your comment

Comments0