• seabg1
  • seabg1

Parallax Scroll Effect and Loops

To enable the Parallax effect on scroll, you will need to define an array of Parallax Levels and the Parallax Art within the Slider option.

Furthermore do not forget to set the Layers which you wish to move in parallax mode add the Parallax Class as well.

How to add Parallax mode to a layer ?

	  		  	
		<div class="tp-caption lfb rs-parallaxlevel-1"
			data-x="center" data-hoffset="-998"
			data-y="bottom" data-voffset="100"
			data-speed="500"
			data-start="500"
			data-easing="Power4.easeOut"
			data-elementdelay="0.1"
			data-endelementdelay="0.1"
			data-endspeed="300"
			style="z-index: 22;">
				<div class=" rs-wave"  data-speed="2" data-angle="0" data-radius="20" data-origin="50% 50%">
				   <img src="images/dummy.png" alt="" data-lazyload="images/newwave1.png">
				</div>
		</div>
	  

What option do i need to set?

	  	  jQuery('#slider').show().revolution(
				{
					dottedOverlay:"none",
					delay:16000,
					startwidth:1170,
					startheight:700,
					hideThumbs:200,
					
					thumbWidth:100,
					thumbHeight:50,
					thumbAmount:1,
					
					navigationType:"none",
					navigationArrows:"none",
					navigationStyle:"round",
					
					touchenabled:"on",
					onHoverStop:"on",
					
					swipe_velocity: 0.7,
					swipe_min_touches: 1,
					swipe_max_touches: 1,
					drag_block_vertical: false,
											
					parallax:"mouse",
					parallaxBgFreeze:"on",
					parallaxLevels:[10,7,4,3,2,5,4,3,2,1],
											
					keyboardNavigation:"off",
					
													
					shadow:0,
					fullWidth:"on",
					fullScreen:"off",

					spinner:"spinner4"
											
				});
  	  

How to add Loop Options to Layers? rs-wave, rs-pulse, rs-slide, rs-pendulum (see Documentation for further options)

  	  <div class="tp-caption lfb rs-parallaxlevel-1"
			data-x="center" data-hoffset="-998"
			data-y="bottom" data-voffset="100"
			data-speed="500"
			data-start="500"
			data-easing="Power4.easeOut"
			data-elementdelay="0.1"
			data-endelementdelay="0.1"
			data-endspeed="300"
			style="z-index: 22;">
				<div class=" rs-wave"  data-speed="2" data-angle="0" data-radius="20" data-origin="50% 50%">
				  <img src="images/dummy.png" alt="" data-lazyload="images/newwave1.png">
				</div>
		</div>