Easy Java Script Code for Animated Banner - Squeeze Text
By Stephen Bucaro
Using Java Script along with CSS (Cascading Style Sheets) allows us to create some fun and
interesting animations. One of the easiest things to create is an animated banner. In this article
I'll show you how to use JavaScript and CSS to create an animated banner that squeezes text
and which you can easily customize for your own use.
A basic banner is a box displayed on a webpage. To create the box, we'll use an html DIV
element. You place the html code for the DIV in the body section of your webpage.
The code for a DIV is shown below.
<div id="myBanner">
</div>
The first thing we'll do is style the DIV. To do this, you place a style code block in the head
section of your webpage. The code for the style block is shown below.
<style>
#myBanner
{
display:inline-block;
width:468px;
height:60px;
border-style:solid;
border-color:#0000ff;
border-width:1px;
background-color:#bbbbff;
}
</style>
The meaning of most of the style rules are self evident. The DIV will be 468 pixels wide
by 60 pixels high. This is the most common standard size for a div. You can edit these
dimensions to change the size of the banner. The style rules define a solid border, the
border color being blue (#0000ff being hexadecimal code for blue, of course you could just
use the word blue here) one pixel in width, with a background color of light-blue.
The first property in the style definition needs some explanation. Defining the DIV's display
property as inline-block allows it to flow inline with the text and other elements on your
webpage. In order for this to work in both the Internet Explorer and Firefox browsers requires
you to use <!DOCTYPE html>. If you want to appear on its own line, you don't
need the display:inline-block rule or the html DOCTYPE, because a DIV is a block
element by default.
One of the most difficult and complicated things to do with CSS is to position a box on
your webpage where you want it. Generally you'll either want it to flow inline with the text
and other elements, or you'll want it on its own line, but there are other methods to position
an element (e.g. relative, absolute, z-order, etc.) If you have trouble positioning your
banner where you want it, study the CSS box model and CSS positioning. Or you might
just contact me for some advise.
Now lets put some text on our banner. Inside your banner DIV, put an html P (paragraph)
element with an id of "myText" and an align attribute set to "center". The code for this
is shown below.
<div id="myBanner">
<p id="myText" align="center">MY BANNER TEXT</p>
</div>
The next thing we'll do is style the paragraph. To do this, add the following code within
the style block in the head section of the webpage.
#myText
{
font-family:verdana;
font-size:14px;
font-weight:bold;
color:#000000;
}
This sets the font to verdana, 14 pixels in size, bold, with a color of black. (#000000 being
hexadecimal code for black, of course you could just use the word black here).
|