Chapter 7
Animations and Effects
WHAT’S IN THIS CHAPTER?
- Animating Elements and CSS Properties
- Resizing Elements
- Creating Custom Animations
- Animations with HTML5 Canvas
One of the fun parts of working with the Web is animating it. By animation we not only mean moving elements around, but also toggling their visibility, altering their properties in either a timed fashion or in reaction to an event, or even resizing an element. Web animation use to be done mostly with Flash, and JavaScript was used for minor situations such as rollovers. But, the tables have turned, and with the help of jQuery, animating the Web through JavaScript is much more predominant.
In this chapter you explore some of the shortcuts that jQuery offers for animating components in your web applications such as moving, fading, toggling, and resizing elements. You explore how to combine different animations effects in parallel with the $.animate() method, and then re-apply the same techniques with the new HTML5 canvas tag.
ANIMATING ELEMENTS
Elements, like divs, have two properties that determine their positioning on a web page: the top and left properties. The positions can be expressed in either percentage or using a unit of length like pixels or centimeters.
The following code sample illustrates the basic concept underlying an animation, programmatically adjusting the position of an element. In it, any click on the document moves the green div ten pixels to the right.
<!DOCTYPE html> <html> <head> <style ...
