Pro CSS3 Animation

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

The footer should be pushed below the bottom edge of the viewport window by the content in the article.
You’re going to style the page, indenting the links in the footer slightly and making them invisible by lowering
their opacity (Listing 8-12).

Listing 8-12. Base CSS Code for a Page with Footer Navigation

body { font-family: Avenir, sans-serif; margin: 100px 0; }
article { width: 768px; margin: 0 auto; }
footer#articlefooter { padding: 0 25px; }
footer#articlefooter a {
text-decoration: none; color: #000; opacity: 0; position: relative;
}
footer#articlefooter a img { width: 77px; height: 77ps; vertical-align: middle; }
a#prevpage { padding-left: 70px; float: left; transition: 1s 1s opacity linear, 1s 1s translateX 
linear; }
a#nextpage { padding-right: 70px; float: right; transition: 1s .5s opacity linear, 1s 1s 
translateX linear; }

You’ve associated the CSS3 transition code with the links: if they are fired at the same time, .linkmoveright,
associated with the #nextarticle element, will move first. After a short delay, it will be followed by the
.linkmoveleft class, associated with #prevarticle.
Note that you have made the transition more efficient by declaring the properties you are changing: because
they are multiple properties, you use a repetition separated by a comma.
Rather than associate the changes to the elements that will be initiated by your transitions with a :hover or
:focus pseudo-selector, you’re going to define them as a new class (see Listing 8-13).

Listing 8-13. Transforms for Footer Navigational Elements

.linkmoveleft { transform: translateX(-70px); opacity: 1; }
.linkmoveright { transform: translateX(70px); opacity: 1; }

Finally, you’re going to add a script at the very bottom of the page that will look at a few variables and judge
when to add these classes to the elements.
As used in Listing 8-14, the articleheight variable determines the overall height of the body, including all
of its content. scrollTop measures how many pixels of the page are above the top edge of the browser window:
this will be 0 when the page loads, with the value increasing as the user scrolls down. By dividing articleheight
by 2 and comparing the result to scrollTop, you can determine when the user has scrolled through half the page
and then apply the classes (Listing 8-14).

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