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!


Comments

Popular posts from this blog

Making a web admin panel for Kodular apps

I made a tablet

My latest app: Collage!