Chapter 3 ■ CSS3 tranSitionS for imageS
54
url(lake-benmore-new-zealand-panorama.jpg) -1300px 200px no-repeat,
url(lake-tekapo-new-zealand-panorama.jpg) -2000px 600px no-repeat,
url(new-zealand-panorama.jpg) -3900px 1000px no-repeat,
url(lindis-pass-new-zealand-panorama.jpg) -1300px 1300px no-repeat;
}
div#wrapper { width: 600px; margin: 5em auto; padding: 3em; }
Unfortunately there is as yet no background-opacity property in CSS; you must either fade out the images
in PhotoShop before saving them, or do something else to retain the legibility of the text as the images pass
underneath it. To start, add a partially transparent background-color to the div by applying background:
rgba(255, 255, 255, 0.8);.
Animating the Background Images on Load
It’s easiest to start an animation like this with CSS3 Keyframes (discussed in Chapter 5), but it is possible to
achieve a similar effect using transitions only, by placing a pseudo-class on the body. To demonstrate this
concept, you’ll add a new declaration to your CSS (Listing 3-42).
Listing 3-42. CSS Code for a Background Transition on Page Load
body:hover {
background:
url(lake-benmore-new-zealand-panorama.jpg) calc(100%+1300px) 200px no-repeat,
url(lake-tekapo-new-zealand-panorama.jpg) 2400px 600px no-repeat,
url(new-zealand-panorama.jpg) 2400px 1000px no-repeat,
url(lindis-pass-new-zealand-panorama.jpg) 2400px 1300px no-repeat;
transition: 70s all linear;
}
This sets the images off the screen to the far right, assuming that the browser window is less than 2400 pixels
wide. (A reasonable assumption to make now, but dangerous long-term: a better solution will be to use CSS3
variables or calc once they are fully supported.)
There are three disadvantages to this approach: the first and most serious is that the moment the user’s
mouse moves outside the browser window, the images will reset to their default position off the screen to the left.
You could ease this problem slightly by moving the transition code to the default body state, so that the transition
will begin to reverse when the user’s mouse moved away.
The second issue is that all of the background images must be animated together as a group; there’s no way
of transitioning images separately using this method.
What’S CaLC?
While not technically necessary in this context, i used calc in the declaration shown in Listing 3-42 as a
means of demonstrating an exciting new property. calc comes achingly close to the idea of CSS3 Variables
(another new CSS3 module), allowing us to specify any length value as an arithmetic expression. in the case
of Listing 3-42, the calculation simply adds the width of the current element to its parent (the body) so that
the image is assured to be offscreen when the page loads.
You can read more about calc at https://hacks.mozilla.org/2010/06/css3-calc/.
c