Parallax Web Animation

SUMMARY: While in the class “Digital Design” we viewed many Parallax web Animations and my teacher decided to make it an assignment to make our own using our own research skills. He put us in groups of two, so we could help each other learn together and overall get a better understanding of how Parallax works and how difficult/easy parts are for creating one.

Skills: While participating in this activity, My partner and I learned many skills as well as used the skills we’ve already had. For example, We used our skills we learned from “Codecademy” for putting images and linking YouTube videos to an HTML and CSS document. For this project I believe that we gained more skills by one, learning how to animate our webpage using parallax. Also Creating a Hulk Account and using CyberDuck which is a whole new area in the Digital Design world.

Although our final product worked, we had a lot of obstacles we had to overcome. For example, at first we embedded our audio wrong so we had to place the audio inside the body of the HTML coding. Then, we had to fix the links allowing our audio to play on our website. Our biggest problem was uploading our webpage to my hulk account through CyberDuck. Usually, students do not update their links causing their webpage to not show their CSS But, we chose for our images to come straight from the Internet. This should have made that problem disappear because nothing was lost in the transition through CyberDuck to the Hulk Account. This is the reason that our images are the same as the original images. This obstacle did not get us off-task though. We continued creating our webpage and added a YouTube video which was required. This was very successful and easily processed through CyberDuck without any information being “lost” and causing our webpage to malfunction.

What I learned: During this process, I learned a lot of things, such as managing time. This was very important because initially we were not given a due date. We had to set our own due-dates for particular parts so that we could not potentially get off-task. I also learned how important it is to work with another person who is not as outgoing as I am. This taught me how to work independently but also make sure that they agree with all the choices I make and to ask them for ideas so they were also a part of the process. One 21st Century skill that I used other than Social and Cross-Cultural Skills (explained above) was Critical Thinking and Problem solving. Because we did not sit down and have a lesson, we had to find our own tutorials and websites to explain how to create a Parallax Web Animation. This forced my partner and I to research more than usual and because there are many ways on creating a website, we had many problems that we had to first figure out how we wanted our finished product to look like, then find the coding on how to fix it to get that result. The ways we solved our problems were by researching and using the tutorials found on the internet.

Three tutorials that we used in the process of creating our webpage were…

Tutorial #1

Tutorial #2 (audio example)

Tutorial #3 (What our Hulk Account should look like)


Here is a link to our work!!



Leave a Reply

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