Recently a student in my WordPress Course asked how to create a 3D Parallax Effect that reacts to mouse movement with Revolution Slider.

An example of a website that features this is 3D parallax effect Matthew Wagerfield.

Revolution Slider also offers the the option to setup parallax scrolling, or a combination of scrolling, and mouse movement. The process to setup this up is the same and is explained below.

Here is how it is done:

Stage 1:

• Click on “Slider Editor” tab at the top
• Select the Slide you would like to update
• Click on “Pallax / 3D”  (further down the page).
• Select an object / layer and click on the “Parallax Depth” Dropdown to assign that object/layer to a number (it will make sense why we are doing this later and you will probably come back to this to re-adjust).  Assign all the objects/layers that you want to animate to a Parallax Depth number.
• Click Save

Stage 2:

• Click on “Slider Settings” tab at the top
• Click on “Parallax & 3D” on the right side to expand the box
• Turn on:     Enable “Parallax / 3D”.
• “Event”:   Select – “Mouse Move”.   Here you can also select parallax scrolling, or a combination of scrolling and mouse movement.
• “Parallax Origo”:  “Slider Center”  (I believe Origo is meant to meant Origin)
• Under “Parallax Levels”,  assign a number between 0 & 100 to each depth. The higher the number the more movement.  Each depth number is based on the object/ layer we assigned it earlier
• Click Save

Have a play with the settings.

This is one of Revolution Slider’s most interesting features.

Leave a comment below if you found this article helpful in implementing this 3D parallax effect.