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

An example of a website that features this is 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

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.

 

Share