Parallax

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

Initialization


  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.parallax');
    var instances = M.Parallax.init(elems, {
      // 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

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


  var instance = M.Parallax.getInstance(elem);
.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";
    }