Parallax Web Animation


For this project, my partner and I have successfully made a parallax animation from a parallax website demo. We have found images and created them for the web version, picked audio and embedded it into the code, and finally chose a video that is short that is embedded. We used a website I found that is a demo that has four pictures in it while you scroll, so the process would be short, but would still end up working for us. Since this is the first project that is having us create a parallax web animation, I didn’t have any experience about parallax websites. However, after collaborating and receiving help/advice from peers, I now understand the structure of a parallax. There were a lot of problems with embedding the audio and the video not playing and showing up in Firefox. My partner and I worked together to try and fix these and learning what the problem was. Near the deadline, we managed to solve these problems by getting help from peers and correcting the code.

In the process, I searched for images, audio, and a short video, while Ismael created the images, then embedded the images & audio into the code. After fixing the multiple problems with the audio & the website, my partner and I completed the project within the deadline date. If we have had more time, I would have changed the text to represent our recreated parallax. Overall, I think we learned from the mistakes we made, which mostly preventing us from finishing earlier than when we wanted to.

Here is the web page of the working parallax.

What I learned

During this project, I learned what a parallax website is and the basics of it. I learned a lot from tutorials and from peers around me. This is a tutorial that helped me upload my work to Cyberduck and the hulk server. Another tutorial that helped me was embedding audio into the html. These tutorials helped me problem-solve my mistakes and see what my partner & I did wrong. Even though my partner and I struggled with getting our design to work properly, I learned how to recreate a parallax scrolling animation with Ismael’s help. Comparing my knowledge before starting this project until now has improved greatly by becoming more familiar with Dreamweaver and coding.