Modular Animated Letters - Red
Free Animations & Tutorial 1/4
Here's a copy of the coding for the above animated title "Free Letters". As you can see, each letter (GIF) has a height (70) and width (60) attribute. This does two things. First, it let's the browser know how much space each animation needs when it first starts displaying the page (keeps the page from jumping up and down as it loads). And second, it allows you to adjust the size of the graphic on the page from it's natural size if need be. These animated letters I provide in this section normally have a height of 70 pixels and a width of 60 pixels. It is also the size I use in the main titles. Right here, I show you the same coding I use for the main title of this page "Free Letters". Below, I show you an example using other height and width attributes to change the size of the letters. |
| <center> <IMG SRC = "f_red.gif" HEIGHT=70 WIDTH=60> <IMG SRC = "r_red.gif" HEIGHT=70 WIDTH=60> <IMG SRC = "e_red.gif" HEIGHT=70 WIDTH=60> <IMG SRC = "e_red.gif" HEIGHT=70 WIDTH=60> </center><BR><BR> |
| <center> <IMG SRC = "l_red.gif" HEIGHT=70 WIDTH=60> <IMG SRC = "e_red.gif" HEIGHT=70 WIDTH=60> <IMG SRC = "t_red.gif" HEIGHT=70 WIDTH=60> <IMG SRC = "t_red.gif" HEIGHT=70 WIDTH=60> <IMG SRC = "e_red.gif" HEIGHT=70 WIDTH=60> <IMG SRC = "r_red.gif" HEIGHT=70 WIDTH=60> <IMG SRC = "s_red.gif" HEIGHT=70 WIDTH=60> <center><BR><BR> |
To save: Just click on the letter you want to bring it up by itself. On the menu bar, click "file" and then "save as" to save the file to your own machine. (An easier way is to right-click and use the "save as" option on the drop-down menu that appears.)
| <center> <IMG SRC = "s_red.gif" HEIGHT=35 WIDTH=30> <IMG SRC = "m_red.gif" HEIGHT=35 WIDTH=30> <IMG SRC = "a_red.gif" HEIGHT=35 WIDTH=30> <IMG SRC = "l_red.gif" HEIGHT=35 WIDTH=30> <IMG SRC = "l_red.gif" HEIGHT=35 WIDTH=30> </center><BR><BR> |
This is an example of what the letters look like if you change the height and width attributes to make them smaller. Above, I use a height=35 and a width=30. This is exactly one half each image's natural height and width. You should always divide or multiply the height and width by the same factor. A height=35 and a width=30 is the smallest you can go with these letters and still get the animation effect. However, since the makeup of the letters are exact squares, you can go as large as you like. More examples on the other modular animated letters of different colors coming, so please, take a look at the others. |
lue Modular Animated Letters - Part 2/4 HTML tutorial
reen Modular Animated Letters - Part 3/4 HTML tutorial
ellow Modular Animated Letters - Part 4/4 HTML tutorial