Brooklyn Nets

View Site

Languages

  • HTML 5, CSS, Javascript, jQuery

Tasks

  • Convert PSD designs to functional site
  • Make the site fully responsive
  • Make the site in standards compliant HTML 5
  • Add a parallax scrolling element to provide depth

The Project

Create a destination where season ticket holders whose lease was expiring would be enticed to renew their season tickets. The page would be handed off to a partner company to hook into an existing database of ticket holders so that each user would receive a page personalized to them. The page addresses them directly, and even refers to their sales rep - complete with contact information.

Quick Turnaround

I had 2 weeks to come up with a fully functioning, responsive site that was HTML 5 standards compliant and contained a parallax scroll effect. The trick here was that not only was I developing for our team to review, I also needed to ensure that the code I was providing our partner company was perfect so that all they had to worry about was the database hook-up.

The Result

The code I provided was standards compliant (validated through the w3c validator) and was as clean as possible. The head developer over at the partner company we were working with commented that the code was perfect and "exceeded their expectations". The project was completed on time and the partner company had to make no adjustments to the code aside from the PHP element.

Project Features

Parallax Scrolling

Parallax scrolling is an effect where you make elements move at different speeds as the user scrolls to create an illusion of depth on your page.

For the renewal page, I created a few slices with expanded background images and quotes overlayed on top. The background image scrolls slower than the quotation overlay, thus giving a sense that the overlay is floating.

View Example