Showing posts from June 6, 2020

How to make a fancy parallax scrolling website

This is my parallax scrolling website. The parallax effect is when objects in the background appear to move slower than the objects in the foreground when perspective is changed. I recently drew this picture of the ISS, and I decided to use it on the website.
First, I exported each of the layers in the drawing as PNG files (I drew it in Procreate).

Then, I added them all to a website using div elements (with background images set to the images) set up with CSS to lay on top of each other.
Using an awesome JS library called Rellax, I added a parallax scrolling effect.
And here's the code!