{"title":"Adding a Layer Parallax Effect","id":51972,"link":"https:\/\/env.averta.net\/en\/step\/adding-a-layer-parallax-effect\/","parent":[51827],"content":"<p>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.<\/p>\n<p class=\"aswi-text-box box-note\"><strong>Note: <\/strong>Before creating the parallax effect, make sure the slider script package contains the <code>parallaxLayers<\/code> addon. For more info check out <a href=\"https:\/\/env.averta.net\/en\/step\/adding-a-layer-parallax-effect\/?b=,\" title=\"Adding a Layer Parallax Effect\">Building slider script<\/a> article.<\/p>\n<h2>2D parallax<\/h2>\n<p>2D parallax effect only moves the layer on X and Y. To set this effect to a layer, you need to add it by <code>data-parallax<\/code> attribute. For example <code>data-parallax=\"30\"<\/code> or you can set X and Y movement separately by <code>x,y<\/code> pattern like <code>data-parallax=\"20,10\"<\/code>.<\/p>\n<pre class=\"lang:xhtml decode:true \">\t&lt;div id=\"masterslider\" class=\"master-slider\"&gt;\r\n\t\t&lt;div class=\"ms-slide\"&gt;\r\n\t\t\t&lt;!-- .... --&gt;\r\n\t\t\t&lt;div class=\"ms-layer\"\r\n\t\t\t\t\t data-type=\"text\"\r\n\t\t\t\t\t data-parallax=\"30\"\r\n\t\t\t&gt;\r\n\t\t\t\tText layer content here...\r\n\t\t\t&lt;\/div&gt;\r\n\t\t\t&lt;!-- .... --&gt;\r\n\t\t&lt;\/div&gt;\r\n\t\t&lt;!-- .... --&gt;\r\n\t&lt;\/div&gt;<\/pre>\n<h2>3D parallax<\/h2>\n<p>3D parallax effect rotates the layer on X and Y. To define the 3D parallax effect, you need to add <code>data-parallax-3d<\/code> attribute. Like the 2D parallax you can set X and Y separately by <code>x,y<\/code> pattern. For example <code>data-parallax-3d=\"10,15\"<\/code>.<\/p>\n<pre class=\"lang:xhtml decode:true \">\t&lt;div id=\"masterslider\" class=\"master-slider\"&gt;\r\n\t\t&lt;div class=\"ms-slide\"&gt;\r\n\t\t\t&lt;!-- .... --&gt;\r\n\t\t\t&lt;div class=\"ms-layer\"\r\n\t\t\t\t\t data-type=\"text\"\r\n\t\t\t\t\t data-parallax=\"30\"\r\n\t\t\t\t\t data-parallax-3d=\"10\"\r\n\t\t\t&gt;\r\n\t\t\t\tText layer content here...\r\n\t\t\t&lt;\/div&gt;\r\n\t\t\t&lt;!-- .... --&gt;\r\n\t\t&lt;\/div&gt;\r\n\t\t&lt;!-- .... --&gt;\r\n\t&lt;\/div&gt;<\/pre>\n<h2>Parallax types<\/h2>\n<p>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 <code>parallaxMode<\/code> slider option in the <a href=\"https:\/\/env.averta.net\/en\/step\/adding-a-layer-parallax-effect\/?b=,\" title=\"Adding a Layer Parallax Effect\">setup slider<\/a>. Or set it for layer individually by <code>data-parallax-mode<\/code>. Possible values are listed below.<\/p>\n<ul>\n<li><code>mouse<\/code> &#8211; Parallax moves by mouse location<\/li>\n<li><code>mouse:x-only<\/code> &#8211; Parallax moves by mouse location but only on X.<\/li>\n<li><code>mouse:y-only<\/code> &#8211; Parallax moves by mouse location but only on Y.<\/li>\n<li><code>swipe<\/code> &#8211; Parallax moves by slide location on swiping or slide changing transition.<\/li>\n<\/ul>\n<pre class=\"lang:xhtml decode:true \">\t&lt;div id=\"masterslider\" class=\"master-slider\"&gt;\r\n\t\t&lt;div class=\"ms-slide\"&gt;\r\n\t\t\t&lt;!-- .... --&gt;\r\n\t\t\t&lt;div class=\"ms-layer\"\r\n\t\t\t\t\t data-type=\"text\"\r\n\t\t\t\t\t data-parallax=\"30\"\r\n\t\t\t\t\t data-parallax-3d=\"10\"\r\n\t\t\t\t\t data-parallax-type=\"swipe\"\r\n\t\t\t&gt;\r\n\t\t\t\tText layer content here...\r\n\t\t\t&lt;\/div&gt;\r\n\t\t\t&lt;!-- .... --&gt;\r\n\t\t&lt;\/div&gt;\r\n\t\t&lt;!-- .... --&gt;\r\n\t&lt;\/div&gt;<\/pre>\n<h2>Scroll parallax effect<\/h2>\n<p>Master Slider also supports scroll parallax effect which moves the slider content while scrolling the page. For more information check out <a href=\"https:\/\/env.averta.net\/en\/step\/adding-a-layer-parallax-effect\/?b=,\" title=\"Adding a Layer Parallax Effect\">Click Here<\/a> article.<\/p>\n","type":"solution"}