Parallax / 3D

JavaScript Settings
1. Parallax
2. 3D
HMTL Markup
1. Slide Backgrounds
2. Slide Layers

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

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

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

Exclude the 3D effect from the slide's main background, applying it to Layers only.

ddd_overflow

visible
hidden

Allow slide Layers 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

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.

<li data-transition="fade">

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

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.

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