Team Viget: Under the Hood
Rob Soule, Former Viget
Article Category:
Posted on
We've received great traffic and encouraging feedback since launching our Team Viget site just over three months ago. We've also been asked quite a few questions regarding the functionality used, so here's some explanation on how Team Viget works. The core is a JavaScript (JS) library called jQuery. It's powerful and simple -- even for the programatically challenged designer. Its ability to select HTML elements using CSS selectors and/or XPath is one of its greatest strengths. You should check it out. The site acts as a dynamic-side scrolling box - except on a larger, site-wide scale. To begin, I created a container that spanned the entire width and height of the browser window (Fig. 1, blue box). If the user has JS enabled I assign a class to it, which sets the overflow property to "hidden" so it will behave like a mask. The next child container of that mask holds all the content and is given an extra long width to accommodate users with JS disabled (Fig. 1, green box). Sub pages, which are really just classed elements, are then wrapped within another container then stacked and positioned (Fig. 1, pink box). 
From that point, we move into animation. All of the movement is handled by the jQuery animate() function. It enables you to create amazingly smooth custom animations using anything from position and opacity to font size and borders. For Team Viget, we use it to animate the position. When a user clicks on one of our navigation elements, the entire content wrapper slides from right to left (Fig. 2, green box). It's then repeated -- moving the opposite direction -- to return the user back to the home page. So there's a taste for you. Check out our stylesheet and JS file for more insight. Oh, I almost forgot! We created the beautiful easing effects with George Smith's jQuery easing plugin.
From that point, we move into animation. All of the movement is handled by the jQuery animate() function. It enables you to create amazingly smooth custom animations using anything from position and opacity to font size and borders. For Team Viget, we use it to animate the position. When a user clicks on one of our navigation elements, the entire content wrapper slides from right to left (Fig. 2, green box). It's then repeated -- moving the opposite direction -- to return the user back to the home page. So there's a taste for you. Check out our stylesheet and JS file for more insight. Oh, I almost forgot! We created the beautiful easing effects with George Smith's jQuery easing plugin.
