Pro CSS3 Animation

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

if ($(this).scrollTop() > (articleheight / 2)) {
$("#prevpage").toggleClass("linkmoveleft");
$("#nextpage").toggleClass("linkmoveright");

});
});

CSS3 transitions will fire in response to any appropriate change in the state of the elements they are
associated with , whether those changes are imposed by CSS, JavaScript, or anything else. In this case, the placing
of new classes that contain changes to the elements’ opacity and position with JQuery is enough to set off
the transitions.
While this works, looking at the results critically reveals that the approach has several possible drawbacks:
• Particularly long articles may feature body text that is more than twice the height of the
browser window. The comparison in the script in Listing 8-14 means that for such articles
the transitions may fire before the user has reached the bottom of the page (i.e., after
reading more than half the article they still may not see the footer).

•    The toggleClass function means that JQuery will try to undo the application of the

classes when the user scrolls upward and fire them again when the user returns to the

bottom of the page. Such repeated transitions could prove annoying.

•    Finally, we are assuming that the footer will always be congruent with the bottom of the

page. This is not necessarily true: there may be comments beneath the footer, which

would extend the overall height of the article significantly, causing the JavaScript to apply

the classes early.

■ Note Under the htmL5 specification, article elements nested inside another article are assumed to contain

commentary on the parent.

As an alternative approach, apply the transitions just once when the footer is clearly on the page (Listing 8-15).

Listing 8-15. Improved JQuery Code to Place Classes on Navigational Footer Elements

$(function() {
var footerBottom = $("#articlefooter").offset().top + $("#articlefooter").height();
$(window).scroll(function() {
if ($(this).scrollTop() > (footerBottom - $(window).height())) {
$("#prevpage").addClass("linkmoveleft");
$("#nextpage").addClass("linkmoveright");
}
});
});

If you wanted to support Internet Explorer 6 through 8, you could use Modernizr (http://modernizr.com/)
to detect browser support of CSS transitions. If the browser lacked support, JQuery could fall back on animating
the elements itself (see Listing 8-16).