Secrets Revealed.

July 17, 2009 - James Andres

The second installment in our "how it was made" series for WorkAtPlay.com. In the first part we covered flip and scale effect used on the home page. This post will dive into the slide effect used to navigate between site sections. Before we jump into the code, I was asked a few times why we didn't just use the jQuery ScrollTo to make the sliding effect. The reason for this is we wanted to focus heavily on SEO for WorkAtPlay.com. The ScrollTo plugin requires that the content of all pages exist in one massive cropped div. We felt this wasn't very semantic so we decided to find a solution that would allow us to have a dynamic effect as well as individual content access points (/work, /products, etc..). The slide effect is actually two independent effects happening simultaneously:

• Sliding the body content
• Moving the navigation box

Sliding the body content

The body content slide effect is accomplished using some trickery with the overflow CSS property and dynamically created DIV elements. The process goes something like this:

1. It is determined if the page change is "forward" or "backward", depending on the navigation item clicked, relative to the current navigation item.
2. An AHAH call is made to the server to retrieve the page body of the new page (ie: the page you are trying to get to).
3. Side note, the HTML coming from the AHAH call is already cleverly set to have the new content set to display: none. This is done to prevent flickering.
4. Next, the AHAH content is appended to the main content div. This puts the new page just after the current page. Nothing is visually changed yet, however, because the AHAH content is still display: none;
5. This is the "magic moment"—sounds dramatic eh?—using jQuery $('#content').width() and $('#new-page').css() we absolute position the new page right next to the edge of the current page (left edge if sliding backward, right edge if forward). Quickly, we set the content area to overflow-x: hidden. Also, quickly, we make the new page DIV visible (display: block).
6. Now that the hard part is over, all that is left is to use $('#page-XYZ').animate() to slide the DIVs left or right. If everything has gone to plan the current page will slide off screen and the new page will slide on screen.
7. Finally, we clean up by hiding the old current page DIV (display: none) and setting the overflow-x property on the content area back to its default setting.

As an added bonus, if you navigate back to the same page we can short-circuit the process and not call the server for the page via AHAH. This helps save precious bandwidth and HTTP requests.

Moving the navigation box

Behind the current navigation item is a DIV called the "navigation box" or "active navigation item box". Basically it is just a coloured square sitting behind a transparent PNG. Moving the navigation box is a surprisingly similar process to moving the page body. Only, a tad easier. It goes like this:

1. First, get the width, colour and position of the navigation item being clicked on. That is, the navigation item you are trying to get to.
2. Next, use $('#active-bg').animate({top: ..., left: ..., backgroundColor: ..., width: ...}) to slide the box from its current position to being right under the new current navigation item.

Fading colours in the navigation box

Oh whoops, I forgot to mention how we do that cool colour transformation effect. Just install the jQuery colour plugin, and use the $().animate() function on your backgroundColor property. That's it!