menu

Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling. Check out the demo to get a better idea of it.

Open Demo 

    <div class="parallax-container">
      <div class="parallax"><img src="images/parallax1.jpg"></div>
    </div>

Initialization


  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.parallax');
    var instances = M.Parallax.init(elems, {
      // specify options here
    });
  });

  // Or with jQuery

  $(document).ready(function(){
    $('.parallax').parallax({
      // specify options here
    });
  });

Options

Name Type Default Description
responsiveThreshold Number 0 The minimum width of the screen, in pixels, where the parallax functionality starts working.

Methods

Because jQuery is no longer a dependency, all the methods are called on the plugin instance. You can get the plugin instance like this: 


  var instance = M.Parallax.getInstance(elem);

  /* jQuery Method Calls
    You can still use the old jQuery plugin method calls.
    But you won't be able to access instance properties.

    $('.parallax').parallax('methodName');
    $('.parallax').parallax('methodName', paramName);
  */
.destroy();

Destroy plugin instance and teardown


instance.destroy();

Properties

Name Type Description
el Element The DOM element the plugin was initialized with.
options Object The options the instance was initialized with.

Parallax Customization

The parallax container height is what defines how much of the image can be seen. This is set to a default of 500px. You can add your own style to override this.


    .parallax-container {
      height: "your height here";
    }