Contents
1. JavaScript Settings
1.1 Parallax
- mouse
- scroll
- mouse+scroll
- enterpoint
- slidercenter
- on
- off
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
- on
- off
- on
- off
- visible
- hidden
- visible
- hidden
- on
- off
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
<!-- 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 -->