Creating a Parallax Scrolling Effect with Vanilla CSS & React-Parallax

Engaging the User
An important piece of the development puzzle is figuring out how the user is going to be engaged by the resulting product that is being created. In the world of web development, engagement can take many forms. Let's say you are a web-developer working on your professional portfolio, a good starting point would be asking yourself, "how do I want the user to experience me and my capabilities as a developer?" This should take careful consideration, as a professional portfolio should illustrate your talents to a potential employer or collaborator. If you care more about advanced functionality over aesthetics, your portfolio should reflect that in some way or another. For example, you could showcase a project you created that uses linked lists as opposed to arrays to demonstrate a deep understanding of computer science and memory allocation. And, that is not to say that a portfolio should be bland by any means, your projects should always be as polished as possible. But, you may want to convey that design is not your bread and butter through a more simplistic UI. On the other hand, if you care deeply for design, it goes without saying that your portfolio and projects should always reflect that in some way or another. One approach to this could come in the form of including a project wherein you highlight features such as animations, 3D models, choice of fonts, or parallax scrolling. Which leads me to the topic at hand...

Parallax: What is it and Why Use It?
To put it simply, a parallax scrolling effect is a simple way to provide depth to any project by applying styling that modulates the speed of the background (i.e. making it slower), while the elements in the foreground move at a more "normal" pace (the pace determined by your scrolling). This effect is an optical illusion that is not just used in web-development, but other artistic mediums such as game development as well (think of most 2D Mario games). Parallax scrolling should be in all designer's toolboxes, as it provides a layer of depth that is often engaging to the user.

Implementation via CSS

A highly simplistic implementation of a parallax scroll effect will include the following two styled elements:

• A div containing a background image that is fixed and set to a certain height of your choice.
• A div (your foreground) containing whatever information you want to include and styles whichever way you choose.

//.css 
.yourFirstParallax {
 //choose your background image
  background-image: url("yourChoice");

 //set your height
  min-height: yourChoice%; 

//fix your background image and set to no-repeat
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

//stylized foreground div
.parallaxContentDiv {
    height:300px;
    background-color:white;
    font-size:36px;
    padding-bottom: 500px;
    top: 10%
}

//implementation through HTML
<div class="yourFirstParallax"></div>

<div class="parallaxContentDiv">
Scroll Up and Down this page to see the parallax scrolling effect.
This div is just here to enable scrolling.
Tip: Try to remove the background-attachment property to remove the scrolling effect.
</div>

If implemented correctly, you should be able to see the foreground div flying by while the background image stays in place. As mentioned earlier, we are playing with various speeds here. Although we are not providing any motion to the background image, we have provided a much simpler solution by making the background image fixed in place to allow the motion to come directly from the div containing the content we want to display. It is a neat trick that can be expanded upon however you see fit.

Implementation via React-Parallax
Now that you have a basic understanding of what a parallax scrolling effect is and how to create one, let's truncate our time by using a node package available to us. In fact, although good to know, you can almost completely forget the above information, as this package is going to do most of the heavy lifting.

First, install react-parallax

npm install react-parallax

From here, within your component you are going to use the following import:

import { Parallax } from 'react-parallax';

and throw it within your component like so:

import { Parallax } from 'react-parallax';

function Parallax() {
  return (
      <Parallax blur={40} bgImage="yourImageHere" bgImgAlt="imgDescription" strength={140}>
        Your Content Here
      </Parallax>
  )};

The end result will give you the same effect as the vanilla CSS above (although styled differently), and with much less of a headache. It should be noted that you can stack these components as well. You can find a solid example of react-parallax in action here.

And, to gain a better understanding of how to use react-parallax, read the documentation here.

Hope that helps. Cheers, y'all.