Looking for mind-blowing effects? 🤯 Explore Slider Revolution's advanced WebGL animations

Contents

1. JavaScript Settings

1.1 Parallax

type
  • mouse
  • scroll
  • mouse+scroll
Activate parallax from mouse-movement and/or page scrolling ("mouse" applicable to Layers only).
origo
  • enterpoint
  • 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.
speed
    The content's movement speed. The lower the number, the faster the movement. Usually 300-500 is best. Applicable to Slide Layers.
    levels
      The 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_onmobile
      • on
      • off
      Disable the Parallax on mobile devices.


      jQuery('#rev_slider_1').show().revolution({

      parallax: {
      type: 'mouse+scroll',
      origo: 'slidercenter',
      speed: 400,
      levels: [5,10,15,20,25,30,35,40,
      45,46,47,48,49,50,51,55],
      disable_onmobile: 'on'
      },

      /* ****************** */
      /* settings continued */
      /* ****************** */

      });

      1.2 Settings for 3D

      type
        Enter "3D" to activate the 3D effect
        origo
          Use "slidercenter" for 3D.
          speed
            The content's movement speed. The lower the number, the faster the movement. Usually 300-500 is best. Applicable to Slide Layers.
            levels
              The 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_shadow
              • on
              • 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_bgfreeze
              • on
              • off
              Exclude the 3D effect from the slide's main background, applying it to Layers only.
              ddd_overflow
              • visible
              • hidden
              Allow the slide's main background to display outside the slider's main container.
              ddd_layer_overflow
              • visible
              • hidden
              Allow slide Layers display outside the slider's main container.
              ddd_z_correction
                The CSS translateZ property applied to the 3D effect. Helps to correct mouse-hit collisions between elements in 3D space for certain browsers.
                disable_onmobile
                • on
                • off
                Disable the 3D effect on mobile devices.


                jQuery('#rev_slider_1').show().revolution({

                parallax: {
                type: '3D',
                origo: 'slidercenter',
                speed: 500,
                levels: [5,10,15,20,25,30,35,40,
                45,46,47,48,49,50,51,55],
                ddd_shadow: 'on',
                ddd_bgfreeze: 'off',
                ddd_overflow: 'visible',
                ddd_layer_overflow: 'visible',
                ddd_z_correction: 65,
                disable_onmobile: 'on'
                },

                /* ****************** */
                /* settings continued */
                /* ****************** */

                });

                2. HTML Markup

                2.1 Slide Backgrounds

                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.


                <!-- BEGIN SLIDE -->
                <li data-transition="fade">

                <!-- SLIDE'S MAIN BACKGROUND IMAGE -->
                <img src="assets/images/notgeneric_bg5.jpg" alt="Ocean" class="rev-slidebg"
                data-bgposition="center center"
                data-bgfit="cover"
                data-bgrepeat="no-repeat"
                data-bgparallax="15">

                </li><!-- END SLIDE -->

                2.2 Slide Layers

                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.


                <!-- BEGIN LAYER -->
                <div class="tp-caption tp-resizeme rs-parallaxlevel-7"

                data-frames='[{"delay": 500, "speed": 300, "from": "opacity: 0", "to": "opacity: 1"},
                {"delay": "wait", "speed": 300, "to": "opacity: 0"}]'

                data-type="image"
                data-x="center"
                data-y="center"
                data-hoffset="0"
                data-voffset="0"
                data-width="['auto']"
                data-height="['auto']"

                ><img src="assets/images/app_store.png" alt="App Store" width="130" height="40"></div>
                <!-- END LAYER -->

                Popular Solutions

                [ess_grid alias="wp-popular-solutions"]
                Impressum | Datenschutz