HTML and CSS Reference
In-Depth Information
http : //
What's interesting about Muybridge is that, in 1878, he was able to create movies using a
series of photographs. So, well before h omas Edison invented the motion picture, Muybridge
was making short movies (about 12 frames) giving us an animated view to the past. h e
University of California, Riverside, has preserved and animated Muybridge's work using
animated GIF i les online. To see how you can make animations using refresh pages, down-
load one of the animated GIF's from Muybridge's collection from the link above — locomo-
tion studies — and extract the 12 individual photographs from the GIF i le. You can extract
animated GIF images with Adobe Photoshop, Adobe Fireworks, and several other programs.
(Search on “extract images from animated GIF” in a search engine to i nd plenty of ways to
get the individual images. If you have a Mac, you can use the Preview application, and just
drag the individual images from Preview to a separate folder.)
Once you have extracted the individual GIF i les, set up your animation using the Refresh
state with the meta element in the <head> section of your program. To get started, use the
following HTML5 script ( an1.html in this chapter's folder at
smashinghtml5 ).
< html >
< head >
< meta http - equiv = ”Content-Type” content = ”text/html; charset=UTF-8” >
< meta http - equiv = ”Refresh” content = ”0.1; URL=an2.html” >
< title > Image 1 </ title >
</ head >
< body >
< img src = ”an1.png” alt = ”one” >
</ body >
</ html >
h e individual GIF i les were saved as .png i les and renamed an1.png through an12.png
(the an is for animation). Likewise, the 12 HTML i les were named using the an preface from
an1.html through an12.html . Once you're i nished, you'll have a walking horse. If you
link the 12th page back to the i rst, the horse just keeps on truckin.
Search WWH ::

Custom Search