Materialize CSS Parallax

Materialize CSS parallax is an effect in which background image/content is moved at a different speed than foreground content during scrolling. This effect is known as the parallax effect.

Steps To Create A Materialize Parallax

Follow the given below steps to create a parallax in materialize CSS framework.

  • Step 1: - Place the image inside the container having class .parallax.
  • Step 2: - Wrap the the div having class .parallax to the container having class .parallax-container.
  • Step 3: -At the end initialize the parallax using jQuery or javascript.
Parallax Initialization
  
 //Javascript 
document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.dropdown-trigger');
    var instances = M.Dropdown.init(elems, options);
  });
// Or with jQuery
$('.dropdown-trigger').dropdown();
   

General Syntax

      <div class="parallax-container">
    <div class="parallax">
    	<img src="../images/parallax_img.jpg" class="responsive-img" alt="Parallax">
    </div>
</div>
    
Try it now

Parallax Customization

Please keep in mind that parallax has a default height of 500px. So, if you would like to change the height, then write the following style code.

General Syntax

      <div class="parallax-container" style="height:600px;">
    <div class="parallax">
       <img src="https://picsum.photos/300/400" class="responsive-img" alt="Parallax">
    </div>
  </div>
    
Try it now

Web Tutorials

Materialize CSS Parallax
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4