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

Examples of websites that feature this are Matthew Wagerfield and Digital Hands

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

Revolution Slider 3D Parallax

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

Revolution Slider 3D Parallax

Have a play with the settings.  Turning on “3D” looks amazing in some cases, for example example 1 and example 2

Leave a comment below if you found this article helpful.