Lord have mercy on Lebanon. If you have anyone in Lebanon check on them. Pray for Lebanon
How to create Parallax Scrolling Effects using Materialize CSS

Today you will learn how to create a parallax effect using the materialize CSS framework.

Parallax is an effect where the background content or image, in this case, is moved at a different speed than the foreground content while you are scrolling.

Check out the tutorial to get a better idea of it.

Tutorial
HTML

This is the markup structure or order you need to follow to create the parallax effect.

copy
	
 <div class="parallax-container">
    <div class="parallax">
      <img src="owl.jpg" alt="owl" class="responsive-img">
    </div>
  </div>

After writing that simple markup and check in the browser, nothing will be displayed even after adding the img src value.

What you need to know about some materialize CSS components is that they always need to be initialized to start working.

Initialization

First you create a variable and asign it to every element that will be having the class of parallax,In this case i created a variable and named it parallaxEffect.

copy
	

document.addEventListener('DOMContentLoaded', () => {
  const parallaxEffect = document.querySelectorAll('.parallax');
  M.Parallax.init(parallaxEffect, {});
});

To learn more visit the official materializecss parallax page : https://materializecss.com/parallax.html

Related Post(s)

» How to create a Date Picker using Materialize css.

» How to create a Nav Bar Using Materialize CSS

» How to create a FAQ section using Materialize CSS Framework

» How to create a Simple and Responsive Sidenav

» How to create a simple Autocomplete Search Engine Using Materialize CSS

collections_bookmark Category :: Materialize css
date_range Published :: 2 months ago At: 11:31 AM
event_note Detailed Date :: Jul 18th, 2020
person Writer :: Code

YOU MAY LIKE THESE POSTS

share