ChApter 8 ■ IntegrAtIng CSS3 AnImAtIon wIth reSponSIve weB DeSIgn AnD JAvASCrIpt

Triggering CSS3 Transitions with JavaScript

JavaScript can be used to trigger transitions and animations in CSS3. For example, you could have elements fade
in when users reaches the bottom of a page to increase their interest in related content (see Figure 8-8). CSS
cannot detect the state of the scrollbar—you need to use JavaScript to do that and then animate the elements
that appear using CSS3.

Figure 8-8. Footer elements animated with CSS transitions triggered by JQuery

■ Note there is an argument to be made that if you’re initiating an animation with JavaScript, you might as well

continue to create the animation in that same language. however, as discussed in Chapter 1, CSS3 transitions will

be smoother and more efficient, and will achieve a higher frame rate than what you can achieve in JavaScript.

there is a reason libraries such as JQuery transit (http://ricostacruz.com/jquery.transit/) and move.

js (http://visionmedia.github.com/move.js) are increasingly being used to hook JavaScript into CSS3

transition and Animation methods. this separation of functions reflects a separation between content, presentation,

and behavior: in this example, JavaScript is used to detect Dom events, and CSS is used to present changes in

appearance to that content.

First, let’s assume that you have more than enough content to fill the viewport: I’ll show a heading and a
fragment of Lorem ipsum filler text in Listing 8-11 to indicate the start of the body text. At the very bottom of the
page you’ll have two links inside a footer element. The first link will lead the user to content that is logically
“previous” to the page they are currently on; the second link, to the right, will direct them to the “next” page after
the current one. I’ve used Unicode black left- and right-pointing triangle shapes inside the links to save space:
you should use the appropriate HTML entities (◀ and ▶ respectively) instead.

Listing 8-11. HTML Code for an Extra-Long Page with Content in a Footer Engaged with JavaScript and
CSS3 Transitions

...