Manual

The fundamentals of using Slider Revolution.

Search
Generic filters

Working with Parallax Effects in Slider Revolution

Create the feeling of depth and three dimensionality via parallax motion.

What Does Parallax Do?

Parallax effects in Slider Revolution create an illusion of depth, with some layers appearing closer to the viewer and others further away:

This effect is achieved by making different layers move at different speeds in response to mouse movement or scrolling. The difference in movement speed simulates the real world phenomena whereby the further an object is from you, the less it will appear to move as your viewing position changes.

Let’s see how to take advantage of this functionality in your designs. We’ll start with creating a basic parallax effect, then move onto how to use all the various configuration options available to you.

And if you’d like a video overview before you move on to reading the rest of this guide, check out our 9 minute video tutorial on creating a parallax effect in Slider Revolution:

Basic Parallax Effect

Activate Parallax for the Module

The prerequisite to creating any parallax effect is to enable parallax for the entire module.

To activate parallax for a module go to the Module General Options tab, On Scroll sub-section, Scroll Based Features panel:

In the Parallax tab toggle the Parallax Enabled option to ON:

Note: If you wish, at this time you can elect not to use the parallax effect on mobile devices by toggling Disable on Mobile to ON:

Apply Parallax Motion to a Layer

With parallax enabled at the module level, the next step is to apply parallax motion to individual layers.

First, select the layer you want to apply parallax motion to:

Then go to the Layer Options tab, On Scroll sub-section, Parallax & 3D panel:

From the Level option dropdown, change the setting from No Parallax to any other setting:

The higher the value the greater the parallax motion.

By default, parallax motion is set to be triggered by scrolling, so if you’d like to see the effect in the preview window right away, use the instructions in the next section and change it to be triggered by mouse movement.

Then save your module and preview, and when you move your mouse around you’ll see the layer moving in response:

Mouse Interaction

Back on the Module General Options tab, On Scroll sub-section, you will see the Mouse Interaction panel contains three options you can use to configure how mouse movement, and/or page scrolling, influences the parallax effect:

Triggered By

Use the Triggered By option to determine what causes parallax movement to happen:

Choose Mouse Move and only the mouse will trigger parallax movement. 

Choose Scroll Position and parallax movement will occur when the page in which the module is embedded is scrolled.

Choose Mouse Move & Scroll and both will act as triggers. 

Parallax Orig

The Parallax Orig (origin) option sets the point to which parallax motion will be relative:

If you set the option to Slider Center, when parallax layers move it will always be relative to the same point at the center of the slide. This means that every time you move your mouse to a specific position, the parallax layers will move to exactly the same place in response. 

In the example below, the mouse is moved to the center of the letter X from different angles (i.e. entry points), and the parallax layer moves to the same position each time:

However if you set the option to Mouse Enter Point, parallax layers will move relative to wherever the mouse first entered the slide.

In this second example, the mouse is again moved to the center of the letter X from different entry points, but now the parallax layer moves to a different position each time:

Mouse Speed

If Triggered By is set to Mouse Move or Mouse Move & Scroll, the Mouse Speed option will appear:

The option is set in milliseconds(ms) and controls how quickly parallax layers respond to mouse movement. Anything above 0ms will add some delay in response to mouse movement, and the higher the number the slower the response will be.

BG Speed

If Triggered By is set to Scroll Position or Mouse Move & Scroll, the BG Speed option will appear:

The option is set in milliseconds(ms) and controls how quickly parallax on the background layer responds to scrolling. Anything above 0ms will add some delay in response to scrolling, and the higher the number the slower the response will be.

Layers Speed

If Triggered By is set to Scroll Position or Mouse Move & Scroll, the Layers Speed option will appear:

The option is set in milliseconds(ms) and controls how quickly regular parallax layers respond to scrolling. Anything above 0ms will add some delay in response to scrolling, and the higher the number the slower the response will be.

3D Settings

In addition to having parallax motion, it’s also possible to enable a 3D effect whereby as you move the mouse the entire slide seems to curve around you.

Activate this feature in the Scroll Based Features panel by toggling 3D Effects Enabled to ON:

Once enabled, a new panel labelled 3D Settings will appear below:

Shadow

Toggle Shadow to ON to add a box shadow to the module that will appear when it’s embedded into a page:

Note: You won’t see this shadow in the module editor preview.

Slide Background Disabled

By default, when you enable 3D effects the background layer will move as part of the effect.

However you can opt to keep it still, leaving only the regular layers to move, by toggling Slide Background Disabled to ON:

Slider Overflow Hidden

Toggle the Slider Overflow Hidden option to ON to prevent the slide background protruding outside the the module’s bounds when moving in 3D:

Note: If you also have the Shadow option on, activating this option will hide the shadow. 

Layers Overflow Hidden 

Toggle the Layers Overflow Hidden option to ON to prevent regular layers from protruding outside the the module’s bounds when moving in 3D:

3D Crop Fix (z)

The 3D Crop Fix (z) option allows you to shift where the layers sit on the “depth” axis, i.e. the axis that runs from front to back as opposed to horizontally or vertically:

When this option is set to anything other than 0, you will see all the layers of the slide shift on the depth axis when the parallax effect is triggered. 

For example, here the setting used is 250, and you will notice the layers move towards you when the mouse moves:

Positive numbers will bring the layers closer, and negative values will shift them further away. 

BG 3D Depth

The BG 3D Depth option allows you to shift the background layer forwards or backwards on the “depth” axis:

A positive value will bring the background closer, and a negative value will shift it further away.

For example, here the setting used is -500, and as the mouse moves you will see the background layer has been pushed back quite a distance behind the other layers:

Negative and Custom Depths

You will have noticed when applying parallax motion to a layer that there are a fixed number of values to choose from under the Level option, and all of them are positive by default:

When you select one of these positive values it makes the layer move in the opposite direction to mouse movement and scrolling. The higher the value, the greater the amount of movement there will be.

If you want to make the layer move in the same direction as mouse movement and scrolling you’ll need to apply a negative value instead. And given all the values are positive by default, this means modifying those defaults.

This can be done by going to the Module General Options tab, On Scroll sub-section, Depths panel, and customizing the values therein:

On the left of each of the fields in this panel you will see a number:

These numbers correspond with those seen in the Level option dropdown:

As such, when you update one of the fields on the Depths panel, you’ll see the corresponding setting update under the Level option:

You can use custom depths to add negative values as required, and also to fine tune the amount of movement used in your parallax effect.

Tips for Customizing Templates

Whether you’re customizing a template with a parallax specific design, or adding parallax to a template that didn’t already have it, here are some tips to help you get the most out of the effect.

Amount of Movement

The closer you want an object to appear, the more it should move, and hence the higher the value you should set on its Level option. 

The further away the object should seem, the less it should move, and hence the lower its Level value should be.

We can see this principle applied in the Parallax Scene template, where the mountains in the background move the slowest, and the trees in the foreground move the fastest:

Image Blur

It can help to apply blur to any images you want to portray as being quite close, or quite fast, relative to the design’s point of focus.

This principle can be seen in action in the Parallax Hero template, where the background and foreground layers are blurred, and only the stack of stones in the midground is clear:

As such, if you’re editing a template with blur on its images, try to match that amount of blur in the images you add yourself.

Overlapping Layers

Making closer layers overlap those behind them further helps to boost the illusion. 

We can see this technique used in the Mountain Parallax Header template:

Leveraging Objects with Known Sizes

You can leverage the familiarity people have with the size of certain objects to create a sense of scale. This effect can be made strongest by contrasting smaller objects in the foreground, such as people or cars, with larger objects in the background, such as mountains or skyscrapers.

For example, in the Parallax One-Pager template a person is placed in the foreground, contrasting with massive mountains in the background:

Opposing Level Values

Giving layers opposing Level values, i.e. positive and negative versions of the same amount, can make them appear to be moving in 3D relative to one another. 

This can be particularly striking if all the layers moving in one direction are placed behind a midground object, and all the layers moving in the opposite direction are placed in front of the midground object.

This technique is used to create the orbiting effect seen in the 3D Parallax Cubes template:

Working with Parallax Effects in Slider Revolution

Newsletter

Join over 30.000 others on the Slider Revolution email list to get access to the latest news and exclusive content.