Parallax Content - Materialize

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"></div>
    </div>

Initialization

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

  // Or with jQuery

  $(document).ready(function(){
    $('.parallax').parallax();
  });

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