Parallax Web Animation

Summary –

For this assignment my partner and I had to create our own Parallax website, that portrayed images, layers, with our own words and have the entire page properly flow.

Mock Up/Code –

This is my CSS Code, where you can see the photos that Mckenzie and I chose, they are replacing the old pictures that were originally in the code.

Here is the HTML, with our content replacing the old content.

Here is more CSS, this is just the coloring of the text, and the split code so you can see the result on the side.

 My Page –

Parallax Website

What I Learned –

I learned a lot with this project. When I first downloaded this code, it was very hard for me to understand. I wasn’t sure if I had to do anything with the JavaScript or things like ‘Normalize CSS.’ I also wasn’t sure how to find some of the things I needed to change, like the slides, text, color, etc. So, really the first day I was just messing around and changing pictures and text just to figure out how to work with the code. Once I was set, I worked in changing the Parallax until it met my demands. My biggest struggle in this project was to actually match up the correct code with the right slide. That, and I did a lot of changing backgrounds. Some used to be no image and just a color. I would change the code so it supported an image.

Here is the tutorial/website I followed.

Leave a Reply

Your email address will not be published. Required fields are marked *