Parallax / 3D

Contents

1. JavaScript Settings

1.1 Parallax
back to top
  • typemouse scroll mouse+scroll
    Activate parallax from mouse-movement and/or page scrolling ("mouse" applicable to Layers only).
  • origoenterpoint slidercenter
    The point from where the parallax movement is based upon. "enterpoint" is the point where the mouse first enters the slider. Applicable to Slide Layers.
  • speedThe content's movement speed. The lower the number, the faster the movement. Usually 300-500 is best. Applicable to Slide Layers.
  • levelsThe parallax sensitivity levels. Lower numbers such as 10 lead to less movement, and higher numbers such as 50 create larger movement. Levels are then assigned to the slide's main background or a Slide Layer.
  • disable_onmobileon off
    Disable the Parallax on mobile devices.

1.2 Settings for 3D
back to top
  • typeEnter "3D" to activate the 3D effect
  • origoUse "slidercenter" for 3D.
  • speedThe content's movement speed. The lower the number, the faster the movement. Usually 300-500 is best. Applicable to Slide Layers.
  • levelsThe 3D depth levels. Lower numbers such as 10 lead to less movement, and higher numbers such as 50 create larger movements. 16 levels need to be defined for 3D, where the first 15 can be used for Slide Layers, and the last ("55" in the code example to the right) will be used for the slide's main background.
  • ddd_shadowon off
    Include drop-shadows to enhance the 3D effect. To adjust the shadow strength, search for "3D SHADOW MODE" inside the "revolution/css/settings.css" file.
  • ddd_bgfreezeon off
    Exclude the 3D effect from the slide's main background, applying it to Layers only.
  • ddd_overflowvisible hidden
    Allow the slide's main background to display outside the slider's main container.
  • ddd_layer_overflowvisible hidden
    Allow slide Layers display outside the slider's main container.
  • ddd_z_correctionThe CSS translateZ property applied to the 3D effect. Helps to correct mouse-hit collisions between elements in 3D space for certain browsers.
  • disable_onmobileon off
    Disable the 3D effect on mobile devices.

2. HTML Markup

2.1 Slide Backgrounds
back to top

Apply a parallax level to the slide’s main background by adding a “data-bgparallax” attribute to its main background image.  In the example below, the number “15” represents the 15th value defined in the parallax “level” settings.

For the 3D effect, the “data-parallax” attribute is not needed, and no special attribute is used either.  Instead, the 3D level will always be taken from the last value defined in the slider’s 3d “level” settings. (represented as the number “55” in the script example above)

  • Parallax and 3D for Video Backgrounds
    Add the "data-parallax" value to the video's "poster/cover" image to apply a Parallax or 3D effect to background videos.

2.2 Slide Layers
back to top

Apply a parallax level to a slide’s Layer by adding the “rs-parallaxlevel-” class to the Layer’s main div, with the level index number added at the end of the class name.

In the example below, the number “rs-parallaxlevel-7” represents the 7th value defined in the parallax “level” settings above.