How to Make a Scrolling Marquee in HTML
The marquee element is one of the classic features developed for HTML, aimed at creating scrolling text or images on a web page. Although it has been deprecated and its use is discouraged now, it remains functional in some modern browsers. To create a scrolling marquee using HTML, follow these steps:
1. Introduction to the Marquee Element
A marquee is an HTML element used to add a touch of motion to your website by displaying scrolling text messages or images.
`<marquee></marquee>` tags enclose the content you want to animate in your web page. The animation goes from right to left by default, but you can change this behavior with appropriate attributes.
2. Adding Basic Marquee
To utilize the marquee element, you must place the desired text between the opening and closing `<marquee></marquee>` tags. Here’s an example:
<marquee>
Welcome to my website!
</marquee>
3. Modifying the scrolling direction
You can change the scrolling direction by using the `direction` attribute. The possible values for this attribute are ‘left’, ‘right’, and ‘up’. Here’s an example:
<markee direction=”left”>
This text moves from right to left.
</markee>
<markee direction=”right”>
This text moves from left to right.
</markee>
4. Adjusting the scroll speed
The scroll speed can be adjusted using the `scrollamount` attribute, which calculates pixel movement per update interval (approximately 60 milliseconds). You need to assign a numeric value to this attribute, as shown below:
<markee scrollamount=”10″>
This text will scroll faster.
</markee>
5. Looping the marquee
By default, marquees loop infinitely. However, you can control the number of times the marquee loops by using the `loop` attribute. You need to assign a numeric value to this attribute, as shown in the example below:
<markee loop=”3″>
This text will scroll only three times.
</markee>
6. Adding CSS
Apart from modifying the attributes mentioned above, you can improve the look and feel of the marquee by applying CSS styles:
<marquee style=”font-family: Arial; font-size: 24px; color: blue; background-color: yellow;”>
Scrolling Text Here
</marquee>
Keep in mind that because marquee is deprecated, it might not be compatible with all current and future browsers. It is recommended to use modern techniques such as CSS animations or JavaScript to achieve a similar effect in your web projects.