This article is part of our ongoing Slider Revolution tutorials. You can find all the articles in this series in our Comprehensive Slider Revolution Guide.
Parallax is a popular effect that adds depth and dynamism to your website’s visual content. There are many great premium WordPress themes with parallax effects integrated, and you’ve probably seen the effect thousands of times over the web. But you may be wondering how it’s done. Today we will talk about using the parallax effect in Slider Revolution sliders.
What is parallax?
Parallax can be roughly defined as an effect where elements in the background and foreground move at different speeds as the user scrolls, creating the illusion of depth. Specifically, the elements in the background are set to move more slowly. Below you can see an example of parallax from our Aoki theme.
There are different ways to achieve this effect, and if you are already working with Slider Revolution, you will be pleased to hear that this plugin includes the necessary functions for creating parallax.
How to Enable Parallax in Slider Revolution
First things first – go to Slider Revolution and turn on parallax. go Module General Options > On Scroll > Scroll Based Properties > Parallax and turn the Parallax Enable switch to . Open.
The plugin offers a number of different depth values so you can choose the one that works for you. If the value you are looking for is not here, you can enter your own value as shown below.
How to Add Parallax to Background Images
To add a parallax effect to your background image, go to: Slide Options > When Scrolled > Parallax and 3D SettingsClick and select the preferred depth from the drop-down menu.
There is no golden rule when it comes to choosing depth. We recommend trying different values to see how they work on your page. Different depths will create different effects, so try them all until you find the perfect effect for your page. If you don’t want to experiment, the middle ones are always a safe choice.
That’s it for the background.
How to Add Parallax to Layers
The Slider Revolution parallax effect isn’t reserved for background images only. You can also use it for individual layers inside your slider. With this effect, you can give your users the illusion that they control parts of your slider by moving their mouse. It’s a really neat effect and very easy to set up.
Select your layer, navigate to: Layer Options > When Panned > Parallax & 3D tabTap and select the desired depth level.
And that’s really all. The result will be the parallax layer that activates as the mouse moves.
As a result
As we can see, adding the Slider Revolution parallax effect is super simple, whether we’re talking about individual layers or background images. Note, though, that not every slider requires parallax. Very dynamic sliders with a lot of animation will probably do better without this effect, as the result can be too busy or mixed with motion. For simple sliders, parallax might be just what you need to spice up your page.