How to Parallax Like a Boss
Create parallax effects with react-materialize and materialize-CSS.
Hello there, welcome back! Thank you for stopping by! In this article, we will add super cool looking parallax scrolling effects to an existing mock-up of a single page application or SPA. The SPA was built with React.js and uses components from react-materialize, and was styled with materialize-css.
I recently learned about materialize-css and wanted to see how I could use it in a react app. I researched a bit and found react-materialize that helps me do just that.
What is materialize-css?
Materialize
A modern responsive front-end framework based on Material Design
By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.
What is react-materialize?
From the creators and documentation:
The main goal of this project is to provide react components for materializecss.
You should use React Materialize if you want to use materialize-css components in your react application.
This is only a wrapper around materialize-css for ease of use.
Let’s go!
To use the frameworks you can use either CDN or NPM methods.
// Materialize CSS// NMP method
npm install materialize-css@next// CDN method
// This should go in the header tag
// Compiled and minified CSS<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">// This should go at the bottom of the body tag.
// Compiled and minified JavaScript
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
The App
In this example, we used both methods to get it all working. We installed materialize-css using npm and in our index.html file, we included the <link> tags in the <head> (lines 9 and 10)and the <script> at the bottom of the <body> tag (line 25).
Photo credits for all photos used in this example.
James Wheeler from Pexels
Paul IJsendoorn from Pexels
Fabian Wiktor from Pexels
Tobias Bjørkli from Pexels
Our App was bootstrapped using the create-react-app your-app-name command and has two components. A Navbar and a Slider. The components are in their own directory named components and there is also a directory for the images we will be using. Notice there is no CSS file in our file tree.
Our components are fairly simple. This is in App.js
Here is the Navbarcomponent.
Here we start using our react-materialize components. In line 2 above, we import all the components we will be using. In line 3, we simply import materialize-css to make our styles and components available.
With react-materialize, we access styles and components via the className= attribute. Each component will have a set of attributes you can use to modify the style and functionality of your components. Line 10 above sets our Nav bar to be green and uses the option darken-1 to modify the default color. These range from darken-1 to darken-5 there is also a lighten- option you can use. Be sure to check out the documentation to see the APIs and example code.
Here is the Slider component. I have only written functions that initialize effects. Like the sliding of images in our Slider component (lines 9 to 12 below).
Composing the slider itself is fairly simple too. We start with a <div> with a className of “slider”(line 15 above) then inside of the “slider” <div> we add an unordered list using a <ul> tag(line 16 above). Inside the list, we wrap the items to be displayed in the slider with<li> tags(lines 17 and 27) This is one slide if you need more you rinse and repeat. Note that the image is required for each slide in the slider.
So in this component, we have 3 list items, each one with its own image and text. You can definitely make this more dynamic when you have a DB or more items for the slider but I just added them manually for this example.
Currently, this is what our application looks like.
It looks pretty cool considering we haven’t done much to it. Now let’s make this really cool.
The Parallax Effect
No, sorry it really doesn’t involve magical kitties. The parallax scrolling effect in web development is when an image in the background moves at a different speed than that of the foreground when the user takes an action on the screen like scrolling up or down. This gives the viewer a sense of depth and 3D feel which is super dope in my opinion. It makes sites look much more professional and engaging.
All right so how do we do this?!
We’ll start by adding a new file in our components directory called Sections.js in which we will write our code.
Now, we go through our imports and stub out a functional component.
Notice how we used a variable M this time when importing materialize-css. This is because we will need to initialize our effects as we did in the Slider component.
We are going to need some images so we create some variables for them.
With this, we are ready to start working on our parallax. Parallax scrolling looks best when there are multiple elements together. That said, each parallax item must be wrapped by its own parallax-container and all parallax-containers must be inside a container.
Right, so we give the first <div> a className="container" attribute to achieve this. Then we continue by adding the first parallax-container <div>. Inside of that, we add the parallax <div> which will hold the image. Below that we need a section to separate the images and display some content.
Now, we add the needed section that will hold the text content that will display between individual parallax images. We want the section to have a white background and display our text nice and centered. To do that we use another <div>and give it a className="section white center-align'.
Now, we can add our image and text.
As you can see above, lines 12 through 20 are one single parallax-container, we need multiple to get the effect we want so now we can just copy and paste this for each image we have or if we wanted to get fancy we could write a function to iterate over all our images and return a parallax for each one. For this example, we are just going to copy-paste since we only have three images.
All we need to do now is make sure we are initializing all our parallax items when the component mounts. Since we are using a functional component, we will use the useEffect() hook from React. To make this hook behave like the componentDidMount() lifecycle method, we pass it an empty array as a second argument. This empty array indicates that it will only run once when the component mounts.
On line 11 above, we are grabbing all elements in our document with a class of “.parallax” and assigning them to the element variable. We then use the M variable to call on the Parallax.init() function provided by materialize-css. We take each element and pass it to this function so they are initialized.
All right, we are nearly there!!
Now, we just need to import our component in App.js and see our work in action!
Behold, The Parallax Effect!
I hope you enjoyed that as much as I did! If you found this helpful, interesting, or amusing I’d love to hear your thoughts in the comments. Stay healthy, stay curious.
