Adding a Layer Parallax Effect

To make layers parallax in order to move by mouse or slide position, you can determine how much to move each layer. Master Slider supports 2D and 3D layer parallax effects. You can find out how to create the effect in following.

Note: Before creating the parallax effect, make sure the slider script package contains the parallaxLayers addon. For more info check out Building slider script article.

2D parallax

2D parallax effect only moves the layer on X and Y. To set this effect to a layer, you need to add it by data-parallax attribute. For example data-parallax="30" or you can set X and Y movement separately by x,y pattern like data-parallax="20,10".

	<div id="masterslider" class="master-slider">
		<div class="ms-slide">
			<!-- .... -->
			<div class="ms-layer"
					 data-type="text"
					 data-parallax="30"
			>
				Text layer content here...
			</div>
			<!-- .... -->
		</div>
		<!-- .... -->
	</div>

3D parallax

3D parallax effect rotates the layer on X and Y. To define the 3D parallax effect, you need to add data-parallax-3d attribute. Like the 2D parallax you can set X and Y separately by x,y pattern. For example data-parallax-3d="10,15".

	<div id="masterslider" class="master-slider">
		<div class="ms-slide">
			<!-- .... -->
			<div class="ms-layer"
					 data-type="text"
					 data-parallax="30"
					 data-parallax-3d="10"
			>
				Text layer content here...
			</div>
			<!-- .... -->
		</div>
		<!-- .... -->
	</div>

Parallax types

You can set how parallax effect works, it can react to the mouse movement or the slide location. To set it globally you can set parallaxMode slider option in the setup slider. Or set it for layer individually by data-parallax-mode. Possible values are listed below.

• mouse – Parallax moves by mouse location
• mouse:x-only – Parallax moves by mouse location but only on X.
• mouse:y-only – Parallax moves by mouse location but only on Y.
• swipe – Parallax moves by slide location on swiping or slide changing transition.

	<div id="masterslider" class="master-slider">
		<div class="ms-slide">
			<!-- .... -->
			<div class="ms-layer"
					 data-type="text"
					 data-parallax="30"
					 data-parallax-3d="10"
					 data-parallax-type="swipe"
			>
				Text layer content here...
			</div>
			<!-- .... -->
		</div>
		<!-- .... -->
	</div>

Scroll parallax effect

Master Slider also supports scroll parallax effect which moves the slider content while scrolling the page. For more information check out Click Here article.