• Home
  • Documentations
    • Phlox WordPress Theme
    • Phlox Pro WordPress Theme
    • Master Slider jQuery
    • Master Slider WordPress Pro
    • Master Slider WordPress Free
    • LOTUS WordPress Theme
  • Video Tutorials
    • Phlox ? Video Tutorials
    • Master Slider WP Pro
    • Master Slider WP Free
    • Master Slider jQuery
    • Lotus ? Video Tutorials
  • FAQ
    • General Questions
    • LOTUS WordPress Theme
    • Master Slider jQuery
    • Master Slider WordPress
    • CUTE Slider
  • Knowledge base
    • Beginners
    • Advanced Techniques
    • WordPress plugins
  • Support Forum
    • Login Or Register
    • Support Forum
    • Support Policy
Averta Support Center
  • Home
  • Documentations
    • Phlox WordPress Theme
    • Phlox Pro WordPress Theme
    • Master Slider jQuery
    • Master Slider WordPress Pro
    • Master Slider WordPress Free
    • LOTUS WordPress Theme
  • Video Tutorials
    • Phlox ? Video Tutorials
    • Master Slider WP Pro
    • Master Slider WP Free
    • Master Slider jQuery
    • Lotus ? Video Tutorials
  • FAQ
    • General Questions
    • LOTUS WordPress Theme
    • Master Slider jQuery
    • Master Slider WordPress
    • CUTE Slider
  • Knowledge base
    • Beginners
    • Advanced Techniques
    • WordPress plugins
  • Support Forum
    • Login Or Register
    • Support Forum
    • Support Policy

Looking for the answer

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.

Was this information helpful?

Submit
Wizard Home
Related articles list
Create New Support Ticket
Copyright © 2017 Averta. All rights reserved.