jQuery 1.4 Animation Techniques - Index of

7
Full Page Animations
So far the examples that we've looked at are animations that have formed a
single part of the user interface of the page, or formed part of a specific widget.
In this chapter, we'll look at animations that take up the whole page, such as
background-image animations, or "feature" animations where the thing
being animated is the main focus of the page.
In this chapter, we'll cover the following subjects:
Animating page scroll
Animating background-position to create a parallax effect
Combining page scroll with page navigation
Creating stop-motion animation
All of the examples that we'll look at in this chapter will be based on the animate() method
that was introduced earlier in the book. As we've already learnt how the method is used, we
can jump straight into the action and start on the examples.
Animated page scroll
We can animate the scroll of the entire page very easily using a combination of some built-in
jQuery functionality and some plain vanilla JavaScript. Long blog pages are often split into
smaller, more readable sections with sub-headings, and a secondary navigation structure,
separate from the main site navigation, which links to the different sections. Optionally,
there may also be back to top links that take the reader back up to the top of the page.