Today you will learn how to create a parallax effect using the materialize CSS framework.

Parallax is an effect where the background content or image, in this case, is moved at a different speed than the foreground content while you are scrolling.

Check out the tutorial to get a better idea of it.

Tutorial

HTML

This is the markup structure or order you need to follow to create the parallax effect.

	
 <div class="parallax-container">
    <div class="parallax">
      <img src="owl.jpg" alt="owl" class="responsive-img">
    </div>
  </div>

After writing that simple markup and check in the browser, nothing will be displayed even after adding the img src value.

What you need to know about some materialize CSS components is that they always need to be initialized to start working.

Initialization

First you create a variable and asign it to every element that will be having the class of parallax,In this case i created a variable and named it parallaxEffect.

	

document.addEventListener('DOMContentLoaded', () => {
  const parallaxEffect = document.querySelectorAll('.parallax');
  M.Parallax.init(parallaxEffect, {});
});

To learn more visit the official materializecss parallax page : https://materializecss.com/parallax.html