Materialize is a modern responsive CSS framework based on Material Design by Google.

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, {
      // specify options here


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


All the methods are called on the plugin instance. You can get the plugin instance like this:

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

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