Parallax Scrolling Website

As the final project for the year we were tasked with creating a short comedy sketch, which incorporated both visuals and audio for Channel 4. The concept also had to be brought together with a website that used parallax scrolling.
We were in groups with students from scriptwriting, radio, TV, and of course other students from digital media.

As a group we chose the idea of a terrible driving school, and the scriptwriters wrote a script for us. Once we shot the video and recorded the audio it was time for me and one other digital media student, Richard, to begin creating the website.

In our group Richard created most of the graphics while I focused mainly on the code behind making the website work. Some screenshots of the finished website, along with explanations of how it works can be found below.

Screen Shot 2015-06-17 at 17.34.43
The website opens in front of a billboard, featuring the driving schools logo. As the user begins to scroll a radio advert for the driving school plays.

Screen Shot 2015-06-17 at 17.36.27
The user continues to scroll, and once they reach the building the radio advert stops playing. If they scroll back again it resumes. Once the scroll reaches a certain point the window in the picture above changes into the first video clip, seen in the picture below.

Screen Shot 2015-06-17 at 17.35.57
The video clip begins to play and pauses if the user scrolls further on. It resumes when the user scrolls back.

Screen Shot 2015-06-17 at 17.36.54
The user continues to scroll and reaches another billboard, which plays the second video clip automatically. The background also features details relevant to the video clips such as the bike on the ground and the cones, and also the man on the ground in the image below.

Screen Shot 2015-06-17 at 17.37.03
When the user reaches the end of the website, they have the option to share it on Facebook and Twitter with a single click.

I am very pleased with the outcome of the website, and I think me and Richard worked very well together in terms of completing it. There are some small things I would have changed with some more time, but overall I feel the animations work very smoothly and I am happy with the final website.

Advertisements

Web App Progress

It is now the last week of uni before Easter, and so I would like to be more or less finished with our web app by the end of this week, as I have no access to the dakar server over easter.

I have almost finished the php and backend database work for the project, although there are a few problems which I’m struggling to figure my way around. I’m hoping these will be sorted out in the next few days. All the code I have done so far has been uploaded to github. Billy has been working on the css for our site, and I think he’s almost finished, although he hasn’t uploaded the files to github so I’m not exactly sure how far on he is. The third member of our group, Bankole, is yet to contribute anything towards the website, and rarely turns up to our workshops.

This has made completing the project on time fairly stressful, as it is a lot of work to do between two people, but if we spend a lot of time on it this week it should hopefully be finished by Friday.