Materialize CSS Parallax

Materialize CSS Parallax

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

Follow the given below steps to create Materialize CSS parallax effect.

Step:1 Assign the .parallax-container class to the parallax container i.e <div> class.

Parallax Container
 
     <div class="parallax-container"> </div>    
   

Step:2 Place the image inside the external container having class .parallax.

Parallax Image
 
  <div class="parallax">
    <img src="..." class="responsive-img" alt="Parallax" >
  </div>
   

Step:3 Wrapp the .parallax container inside the external container having class .parallax-container.

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

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();
   

Source Code

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

Source Code : Output

Parallax

Parallax Customization

Please keep in mind that parallax has default height 500px. So, if you would like to change then increase it.

General Syntax

<style type="text/css">
  .parallax-container {
    height: "assign custom height";
  }
</style>    
Try It Now

Source Code

Download
<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 yourself

Source Code : Output

Parallax

Web Tutorials

Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS