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.

    .parallax-container {
   height: "assign custom height";
   }

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

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4