The Beauty of Multi Parallax-Scrolling
Multi parallax scrolling can provide some cool interactive effects. In this blog I will be aiming to provide a simplified log of how I did it for one of my projects and the pitfalls I experienced.
Here is a gif of my project.
First I’ll go into simple parallax scrolling, which is just one fixed image in the background where your other divs can scroll past.
But here is an example of multi-parallax scrolling that I will be explaining how to do.
That cool effect where images seem to be moving at different speeds over each other is actually just multiple layers of images with transparent backgrounds stacked on top of each other in a fixed position with css and moved responsively based on scroll with javascript.
First I went on google to find an image that I could break down into multiple layers based on depth.
I proceeded to break the photo into different image layers with photoshop by using the quick selection tool to grab each layer based on color.
I would carefully do this for every image layer behind the front silhouette and fill the bottom parts of that image layer that we don’t see with just the color of that layer.
I then proceeded to vectorize these images with illustrator so that the low resolution wouldn’t show up on my website. Vector images are based on math and thus can be scaled without losing quality. But this isn’t necessary for the effect.
My HTML <div>.
I then proceeded to add these photos into my images folder in my rails app. However I couldn’t link the background to the div without using “asset_path”, so if anyone figured out another way to reference the images please message me. I also threw in an “h1” on one of the middle layers so that it can be covered by a front div image and create a nice depth effect on scroll. I also got lazy for some of the background images so I didn’t vectorize them (.png instead of .svg).
My CSS for <div id=“parallax-container”>
The fixed position is very key for parallax scrolling. It means that the image will always be at specific spot on your browser as other divs scroll up past it (assuming that all other divs are, position: relative).
I had originally ran into sizing issues (depicted below) without the !important on “background-size: cover.” I’m not entirely sure if it was because of earlier css but the !important solved my issue.
Example error:
Now in order to have all your images move at different speeds when scrolling down you’re going to need a bit of javascript.
My Javascript for <div id=“parallax-container”>
Every time someone scrolls on the window each child-div’s css for “transform” is changed accordingly. This creates that smooth effect where different layers are moving at different speeds to represent depth.
The only thing you might also want in order to create a nice flow throughout your website is to have the div after the parallax container to have the same color as the front image in the parallax container(check the first gif).
And that was my journey in creating a multi-parallax scrolling effect on my ruby on rails project!
FUN STUFF!
Inspired By Resources:
https://www.stephanieogaygarcia.com/blog/creating-a-parallax-effect
