George Lowe's site: Breaking down the project

When we first started discussing this project, the ideas were plentiful, but random. I had to figure out which would be best to build an entire site with. An overall theme. George mentioned liking a carnival or circus tent. So I decided the theme would be a circus. Inside the tent, each section of the site would be in this enormous tent! Awesome!

How?

Early on, he said that voice people never have cool sites, and he wants his to stand out. I took a look around, and saw that most of the examples he gave me looked straight out of 1997. I could definitely do better than that. We decided we want this site to be an experience. Easy access to the info people need, but they could stick around and have fun if they wanted to.

Back to the tent. I want everything inside this one tent. I want it to feel like you are taking a look around this tent to see the different pages. This couldn't be done with regular "click link, go to page" programming. The whole site, all of the pages, would have to be built on a single page. Only the section you want to see would be visible. When you click a link, instead of a new page loading, ruining the experience of being in this tent, the page would simply slide left or right to your desired content. To achieve this, I built the site in html5 and jquery. Sliding pages are easy enough to accomplish with jquery, but I needed to take it a step further to help create the illusion of the tent. The background looks like the inside of the tent, and it is wide. Wide enough to scroll sideways with the content. This will allow me to have different things going on in the background depending on where you are in the site.

I wasn't happy with the background simply sliding with the content, so I decided to give the site more depth. I built layers, and each layer slides at a different speed. This creates a great parallax effect. You may not be familiar with that word, but I'm sure you've experienced the effect before. The easiest example I can think of would be a super nintendo game. You are Mario, running through the stage, and the background is moving a bit slower than you are, and in some cases there was another layer behind that and it would move even slower. I have a 3 layer system set up for the site. Well, 4 layers if you count the stationary layer for UI elements.

Layer 1: logo and navigation. This layer never moves, everything behind it does
Layer 2: top of the page, behind the logo, like the top of the tent. I made this a layer so I could have things in the rafters on the different "slides". I'll get back to that later.
Layer 3: content
Layer 4: the background, interior wall of the tent

And for a little more visual stimulation, there are little fireflies floating around behind the content layer.

I'll get more into the actual content "slides" another day. I'm not quite ready to share the link yet, but soon enough!