Game Development Reference
In-Depth Information
Each animated object was nothing more than a div element with a background im-
age set to it. The waves' background image was set to repeat about the x axis,
whereas the boat's background image was set to no-repeat. The boat's width and
height was set to match the image it represented, whereas the waves had a different
height set for each of them (the wave positioned behind everything was a bit taller
so that it could be seen behind the other wave), but with a width of 100 percent, so
that it always fills the width of the monitor viewing the app, no matter how wide that
monitor is. At the end of this animation cycle, the objects follow that same path, but
in reverse, making the animation seem continuous and always smooth.
The easiest element to animate was the sky, since it only had two keyframes. At
the first keyframe, the div element that represented the sky was set to have a light
blue color for its background. The last keyframe changed that background color to a
slightly darker blue. For a more dramatic effect, we could have had this last keyframe
define a very dark color for the background. For an even more drastic effect repres-
enting this night fall, we could also have added another div on top of this sky ele-
ment, with its background image being a transparent image with white dots scattered
about it. Each dot would represent a star. Then, at the same pace that the sky gets
darker, we set the opacity of this element to become more visible (less transparent),
Search WWH ::




Custom Search