jQuery 1.4 Animation Techniques - Index of

Full Page Animations
What just happened?
The script can be roughly broken into two sections. We have a series of variables first,
followed by an each() method that processes the navigation in the header. The very
first thing we do however is to empty the contents of the current page. This helps make
our script cleaner, because we don't have to avoid processing the first navigation link in
our each() function.
It also ensures the page continues to work if someone visits, say, page-3.html instead of
the first page by typing the URL of that page directly into the browser's address bar. It resets
the site so that the content of the first page is always shown first.
So we first define a series of variables. We cache references to the window object, the
top set of navigation links, and the content container, and create a new object that we'll
populate later in the script to determine where each page is positioned. We also create an
object containing the width and height of the window, again so that we can reference
these properties easily from different points in the script.
We then create a new div element and give it an id attribute for styling purposes. We then
bind an event handler to it which listens for a custom contentLoaded event. jQuery easily
allows us to create custom events which can be triggered programmatically by our script
when appropriate.
Within the anonymous handler function, we first define a multiplier that will be used to work
out how big the container for the collection of pages should be.
We then append the pages element, which will contain the content of each external page,
to the content container on the page, and then add a class name to the content container,
again for styling, but this time for styles that only need to be applied with JavaScript enabled.
Next we set the size of the content container so that it can accommodate all of the external
page content. We use our screensize object and multiplier to determine its size.
The container needs to be one screen-width wider due to how the external page content
is laid out.
We cater for a little more dynamic styling to the header and footer elements by adding a
class name to them. This allows us to give these two elements fixed positioning so that
they always appear at the top and bottom of the viewport and hence remain usable while
we (or our visitors) are navigating around the page. We also add some padding equal to the
height of the header so that the content does not slide below it at any point.
[ 196 ]