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:
- 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
- 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.