Wielding Parallax
If reading the title of this blog gave you pause for a quick millisecond thinking about how I may have found the embodiment of fear from DC comics, I salute you. But the point of this blog is how I found and implemented a react technology that made my final project look a little extra spiffy.
It’s called Parallax, which scientifically I understood to be an effect when a certain things direction or appearance differ when viewed from a different position. A little confusing so here’s an active demo that was linked from the site I found it on: https://codesandbox.io/embed/r0yEkozrw?view=preview
Installing this was as easy as 1, 2, “yarn add react-parallax.” Now I could implement this nifty thing and make my final project look a little more interesting.
First step, getting my project to read images. I had a few wallpaper for Magic the Gathering I want to use for my new laptop, so I created an Images folder and put the ones I wanted in there. Then I renamed them to something more type-friendly than some words combined with underscores and numbers. I put them in the same src folder and “./images/(name of the image).(type of image like png or jpg).
Now the next step is to import Parallax into the file we want to use it in.
Next, we go ahead and implement the Parallax component and define how we want it to look as well as what image to use as the background.
bgImage (line 213) will take in whatever image that’s within the curly brackets and throws it in the background of the div that Parallax will be creating. Strength will affect how much the image is zoomed in. I followed the process from the open source “demo,” and imported the “Unclaimed-Territory.jpg,” as “UnclaimedTerritory,” then assigned it to the “const image1”
Whenever I find a technology or layout I would like to implement, I try to keep as much of a similar process as the example so that I can get it to work.
Next up, to populate the divs within the Parallax component. They created div of a certain height as well as a div within that div with a certain style.
The div with the “height” style will set a div to a certain height and the div with the “insideStyles,” will have all of the stylings that is set within the “const insideStyles”
The insideStyles will pad the div on all sides by 20, keep its position where it is at all times, will be 50% from the top and 50% from the left (ie. the center). It’ll also translate, which I understood as causing the parallax effect when scrolling down. Opacity is something I added to create a see through effect to sort of blend things up a little. Originally the background of the div was white, but I felt it didn’t look too great and made everything look a little blocky.
When finished, it looks like this:
Granted it’s hard to see the effect in a still image, but for now this is the steps to take in order for everything to appear as it should.
