{"title":"Adding Scroll Parallax Effect","id":51983,"link":"https:\/\/env.averta.net\/en\/step\/adding-scroll-parallax-effect\/","parent":[51848],"content":"<p>Scroll parallax effect adds parallax effect to slides and layers. It moves the content when page scrolls. This parallax effect is completely different from <a href=\"https:\/\/env.averta.net\/en\/step\/adding-a-layer-parallax-effect\/?b=51972,51972\" title=\"Adding a Layer Parallax Effect\">layers parallax<\/a> and it works separately.<\/p>\n<p>To setup this effect, add <code>scrollParallax<\/code> option in slider options section. This option accepts an object containing scroll parallax parameters. The parameters are listed below:<\/p>\n<ul>\n<li><code>layers<\/code> &#8211; The layers movement ratio.<\/li>\n<li><code>bg<\/code> &#8211; The slider background movement ratio.<\/li>\n<li><code>fadeLayers<\/code> &#8211; Fades layers on parallax move.<\/li>\n<li><code>fadeBg<\/code> &#8211; Fades slide background on parallax move.<\/li>\n<li><code>scale<\/code> &#8211; Scales slide background.<\/li>\n<li><code>smooth<\/code> &#8211; Enables the smooth parallax movement.<\/li>\n<\/ul>\n<pre class=\"lang:xhtml decode:true \">var slider = new MasterSlider();\r\n  slider.setup( 'headerSlider', {\r\n    width: 900,\r\n    height: 700,\r\n    scrollParallax: {\r\n      layers: 50,\r\n      bg: 100,\r\n      fadeLayers: false,\r\n      fadeBg: false,\r\n      scale: false,\r\n      smooth: false\r\n    }\r\n    \/\/ other options ...\r\n  });<\/pre>\n<p>All of the options are optional. If you need to enable the parallax effect with default parameter values, just set an empty object value. i.e. <code>scrollParallax: {}<\/code><\/p>\n","type":"solution"}