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.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s