I absolutely love the marquee used by twitter on their homepage. Simple yet elegant. In this tutorial I will show you how to make a twitter style marquee which fades in and then fades out beautifully.
I don't know whether the twitter designers have used this technique to customize their marquee but this is a simple and easy way to replicate it.
Requirements:
- Basic understanding of CSS and HTML
- A graphics editing package like Adobe Photoshop or Gimp
- A text editor
- A web browser
Now for this tutorial we won't use the colors used by twitter but we will make a gray text scroll over white background.
Fire up your favorite graphics editor and create a new document width: 30px ,height: 18px with transparent background.
From the color swatch select white (#ffffff) as your foreground color and then select the gradient tool. From the gradient style select Foreground to Transparent. Apply the gradient from left to right and save it as left.png . Flip the image horizontally and save it as right.png
So now we are done with the faders and with our graphics editing package. Next we need to code the CSS file which will define the style for our marquee.
First off we need to create a container which will hold our marquee.
#container{
background-color: #ffffff;
width: 500px;
}
Pretty simple huh? A white box which is 500px wide. That's it. Now we need to customize our marquee tag.
marquee{
color: #A0A0A0;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 14px;
background-color: #ffffff;
}
Again pretty simple CSS code which defines the font family, the font size the font color and the background color. Now we will define both the faders and a scroller which will hold our marquee tag.
#faderLeft{
position: relative;
float: left;
background-image: url(left.png);
background-repeat: no-repeat;
height: 18px;
width: 30px;
z-index: 20;
#faderRight{
position: relative;
float: left;
background-image: url(right.png);
background-repeat: no-repeat;
height: 18px;
width: 30px;
z-index: 30;
#scroller{
position: relative;
float: left;
width: 410px;
margin-left: -15px;
margin-right: -15px;
z-index: 10;
}
Basically the marquee works like:
Looks ugly but this is only a graphical representation of “How It Works!”. The left fader floats to the left of the container, the scroller floats left next to the left fader and is 410px wide. The right fader floats to the right of the container. Now have adjusted the margin-left and margin-right properties of the scroller to slide it under both the faders. The scroller has the lowest z-index value since it should stay at the back and the faders should be on top of it. Save your CSS file as style.css.
Now we will put it all together in our HTML file.
<html>
<head>
<title>Twitterish Marquee</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="faderLeft"></div>
<div id="scroller"><marquee onmouseover="javascript:this.stop();" onmouseout="javascript:this.start();" scrollamount="3" behavior="scroll">Aliquam vulputate ligula at justo laoreet feugiat. Nunc. <span style=" font-weight:700">New Topics</span> Nulla vel elit ac ipsum tincidunt suscipit <span style=" font-weight:700">Hot Topics</span> Morbi tempor est vitae metus congue vestibulum. Nam turpis est.</marquee></div>
<div id="faderRight"></div>
</div>
</body>
</html>
That's it!! Save the file and test it. Here's you custom made twitter-ish marquee. Customize the color scheme as per your requirements.
Cheers!
No comments:
Post a Comment