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.
Follow the given below steps to create a parallax in materialize CSS framework.
.parallax
.
div
having class .parallax
to the container having class .parallax-container
.
//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>
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>