Gene Lu's Portfolio

A Chance to Parallax

For the final leg of my thesis project, I had to create a one page website that summarizes what my service does. Here’s the official brief for this portion of the project:

Online expression of the core elements of the thesis that will be referenced as an archive of SVA (overall) and IxD thesis outcomes. The summary must stand alone as a succinct and comprehensive capture of the thesis, to include each of the following in some form:

  • Thesis and purpose statement
  • Definition of audience and benefits
  • Prototype/demonstration

As a way to introduce people to the service, the top half of the site simulates one of the interactions used in the app. The first leaf (leftmost) gives a brief summary as to what the project is about along with some bullet points. The second leaf (rightmost) explains the why of Story Forest.

Summary Site for Story Forest

Summary Site for Story Forest

One of the fun parts of this project was creating a parallax effect with the background using CSS3. With only a few lines of code (as seen below), I was able to generate a multi-layered background simulating movement between buildings in the foreground and buildings in the background. The speed and position of each background can be controlled within each url call.

// Parallaxing with CSS3 and Multiple Backgrounds
body {
background: url(images/clouds-foreground.png) 10% 0 repeat-x,
url(images/clouds2-foreground.png) 20% 0 repeat-x,
url(images/noise-foreground.png) top left repeat-x,
url(images/city-foreground.png)  40% 265px repeat-x,
url(images/zeppelin.png) 93% 255px no-repeat,
url(images/city-background.png)  10% 110px repeat-x,
url(images/sky-background.png)  5% 0 repeat-x;

I’ve also added a tiny Easter egg that’s barely visible on the right side of the screen to try to get people to resize their browser windows. With that said, here’s the link to the summary site:

Comments are closed.


  • 02 May 2011

Filed Under

Recent Articles

Lead UX Designer on Nike+ Running at R/GA.