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 a Materialize parallax.
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
<div class="parallax-container">
<div class="parallax">
<img src="../images/parallax_img.jpg" class="responsive-img" alt="Parallax" >
</div>
</div>
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>
Source Code
<div class="parallax-container" style="height:600px;">
<div class="parallax">
<img src="https://picsum.photos/300/400" class="responsive-img" alt="Parallax">
</div>
</div>
Web Tutorials
