How to make a scrolling text using html and css

أقسام الموقع: الإطار الزمني الرياضة معلومات سريعة العلوم الكون الصحة لغة وغيرها المنوعات الحيوانات باختصار تطبيقات وكتب

HOW TO MAKE A SCROLLING TEXT USING HTML AND CSS

This will be a simple tutorial on how to make a simple scrolling text. You can make it go vertically or horizontally.

The main code for this tutorial is this:

<marquee behavior="scroll" direction="up"; scrollamount="2">Your Text</marquee>

Some people don't use CSS for this code. But I prefer using it, which can be responsive on all browsers. with CSS, you can change some of the things as you wish. Here are the options:

background-color: blue; you can use words like the name blue. Or letters such as #FFFFFF, which is white. Or the rgb colors by typing rgb(0, 0, 0), and this will be the color black.

text-align: center; You can also change that to right, left or center.

font-size: 125%; I think this is a good size font, but you can change it to whatever you want as long as you have the % sign next to the number. You can also use the "px" method, by adding a number and the "px" letters, such as 25px; or any other number you wish to use.

color: yellow; this will be the color of the font you want. You can use the same opitons like I mentioned with background-color. If you want to have a different font type, press enter and add this:
font-family: arial; or whatever font family you like.

Code:
_______________________________________________________________
<!DOCTYPE html>
<html>
<head>
<title>Scrolling Text</title>
</head>
<body>
<style>
#background001 {
background-color: blue;
text-align: center;
font-size: 125%;
color: yellow;
}
</style>
<marquee id="background001" behavior="scroll" direction="up"; scrollamount="2">
Text 01<br /><br />
Text 02<br /><br />
Text 03<br /><br />
Text 04<br /><br />
Text 05<br /><br />
</marquee>
</body>
</html>

If you want to change it from going up to down, change the direction to "down". Same thing with left and right. However, for the left and right, you might want to remove the <br /><br /> and replace them with dots, or spaces by adding &#160 for each space. This way you can have 5 texts on one line. In the next example, I used 4 spaces between each text.

<!DOCTYPE html>
<html>
<head>
<title>Scrolling Text</title>
</head>
<body>
<style>
#background001 {
background-color: blue;
text-align: center;
font-size: 125%;
color: yellow;
}
</style>
<marquee id="background001" behavior="scroll" direction="right"; scrollamount="2">
Text 01&#160&#160&#160&#160
Text 02&#160&#160&#160&#160
Text 03&#160&#160&#160&#160
Text 04&#160&#160&#160&#160
Text 05
</marquee>
</body>
</html>

You can also change the speed of the scrolling by changing the number of scrollamount. I have it under "2". As far as the ID background001 goes, you can rename it anything you want as long as you change the name everywhere else in this code.

OTHER RELATED PAGES:

Other Topics:

Facts About Asia
Ramadan Q & A
Binary Digits