Parallax Web Design

Summary

In this project I learned how to make a website with parallax affects as you interact with the website. The first thing I did was look at different websites to see how the used parallax to work for them, then I downloaded a very simple example of parallax to get a simple understanding of how I could make my own version. Using Dreamweaver’s selection tool I saw what layers were where which helped me find what code I needed to edit to change the appearance and make it more my own. Then I found music that fit with my sky scraper pictures and put an interactive bar that played the music and placed it at the top of the page and at the bottom of the page I made a text link saying “Video”. After all of the coding was done I downloaded Cyberduck and uploaded all off my files to Hulk.

Code

 

Screen Shot 2015-02-26 at 1.00.16 PM

Finding where to edit text with help of selection tool

Screen Shot 2015-02-26 at 1.05.29 PM

Inserting pictures with help of selection tool

Screen Shot 2015-02-26 at 1.00.00 PM

Audio control bar and music coding

Screen Shot 2015-02-26 at 12.59.21 PM

Files uploaded to Hulk using Cyberduck

(website only works if files are downloaded separately and not in one big file)

My Page

What I Learned

I learned several things on my way to making this website.

  • I learned how to view the coding used behind a website
  • How to directly download a website and all of its contents to my desktop
  • How to make images on a website move at different speeds as well as have different layers
  • I learned how to put music into Dreamweaver as well as have a media player for it

A problem I faced during this project was getting the music we chose to have a see able interface, we asked a neighboring team and they pointed us in the right direction by telling us to have it at the very top of the body code. A problem I personally faced was figuring out how to get all of my files into the Hulk database so I gave in and watched LeDuc’s video.

The main 21st Century Skill learned in this project was how to find a way besides watching or reading a tutorial to figure out how to do something, I dug straight into an example and saw where key items were held in the code and what I could manipulate and what affect that would have.

Leave a Reply

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