Parallax Web Animation

Summary

In this project Kelly and I created a website that uses the Parallax technique. We had to create an animation so we created a .gif file out of five images. Then we had to include layering in the website. The Parallax created that effect perfectly, as there were different images that would move at different paces when the user scrolls down the website. We then had to integrate audio into this website. We created a loop in Garageband, then we put the mp3 file into the code of the website.  Next we had to embed a video into the website. We chose “Charlie Bit My Finger”. Finally, we published the website online using the Hulk server and Cyberduck.

Mock Up/Code

Here is an example of the code we used to create this Parallax website.

To view all of the code, visit my Flickr page: https://www.flickr.com/photos/101762773@N08/

My Page

Here is the link to my Parallax page!

http://hulk.osd.wednet.edu/~freymanka/parallax-part-2/

What I Learned

In this project I learned how to upload a website onto the Internet. I had gotten lost in the tutorial of how to use Cyberduck to upload to the Hulk server, but I dealt with adversity and watched the tutorial a few times until I finally uploaded the website. Another problem I had was getting pictures to appear once the website was uploaded to the server. I then realized that the images were not in the same folder as the HTML file, so I put them in the correct folder and it worked!

Link to tutorial for uploading the website to the server: http://capitalcomtech.info/2015/02/24/uploading-files-to-hulk-with-cyberduck/

Leave a Reply

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