• 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

  • Home
  • Adding Coloumns with Layout Shortcodes
  • Adding Scroll Parallax Effect
  • Adding Scroll Parallax Effect

Adding Scroll Parallax Effect


Scroll parallax effect adds parallax effect to slides and layers. It moves the content when page scrolls. This parallax effect is completely different from layers parallax and it works separately.

To setup this effect, add scrollParallax option in slider options section. This option accepts an object containing scroll parallax parameters. The parameters are listed below:

  • layers – The layers movement ratio.
  • bg – The slider background movement ratio.
  • fadeLayers – Fades layers on parallax move.
  • fadeBg – Fades slide background on parallax move.
  • scale – Scales slide background.
  • smooth – Enables the smooth parallax movement.
var slider = new MasterSlider();
  slider.setup( 'headerSlider', {
    width: 900,
    height: 700,
    scrollParallax: {
      layers: 50,
      bg: 100,
      fadeLayers: false,
      fadeBg: false,
      scale: false,
      smooth: false
    }
    // other options ...
  });

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. scrollParallax: {}

Was this information helpful?

Submit
Previuos Step
Related articles list
Create New Support Ticket

Maybe You're Searching For These

Introducing Phlox
Phlox Code
Customizing Shopping Cart Dropdown Menu
Extending and Renewing Phlox Support
Phlox Accordion
Phlox Button
Phlox Divider
Phlox Quote
Copyright © 2017 Averta. All rights reserved.