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>


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

  // Or with jQuery



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


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', paramName);

Destroy plugin instance and teardown



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";