Summary

In this chapter, we looked at some examples of full page animation, where the animation itself is one of the key elements of the page, not just an attractive but short-lived feature of the interface.

In this example-based chapter, we looked at the following animation techniques:

• Scroll animations where the page is automatically scrolled vertically to different parts of the page when table of contents links are clicked.

• Parallax animations where several background layers are animated at different speeds to create the illusion of depth. In this example, we utilized the brand new cssHooks bgpos.js file to animate the background-position of the different layers.

• Scroll animations where individual pages making up a site are pulled into a single page and the window scrolls both horizontally and vertically to different areas of the page. In this example, we didn't scroll the page manually but relied on the scrollTo plugin.

• Stop motion animation where a series of images are shown so rapidly that...