Marquees are standard method for creating scrolling, bouncing, or slide-in text and images. It is a very important aspect in terms of Both HTML and CSS. Let’s start the Journey of Marquees in HTML and CSS in the following order:
- What Are Marquees?
- HTML Marquees
- CSS Marquees
- Scrolling Text
- Slide-In Text
- Left to Right
- Scroll Vertically
- Bouncing Text
- Another way to create Marquee in CSS
- HTML Marquees vs CSS Marquees
What Are Marquees?
Marquee is a special effect that is used to move or scroll the content horizontally across and vertically down in our HTML web pages. The content can be anything in the webpage i.e some text or images.
HTML Marquees
The HTML <marquee> tag is used to create and style marquees. The HTML syntax to create scrolling text using marquess is
<marquee attribute_name = "attribute_value" attribute_name_2 = "attribute_value_2" ..... > Text or Image to Scroll </marquee>
<html>
<body>
<marquee>Scrolling Marquee</marquee>
</body>
</html>
The possible values of attributes that can be used along with the <marquee> tag is:
width – It indicates the width of the marquee. E.g. 20, 40, 50% etc. The default value for width is 100%
<html>
<body>
<marquee width = "50%">Scrolling Marquee with 50% width</marquee>
</body>
</html>
height – It indicates the height of the marquee. E.g. 20, 50% etc. This default value of height is the natural height of the content.
<html>
<body>
<marquee height = "50%">Scrolling Marquee with 50% height</marquee>
</body>
</html>
direction – It indicates the direction in which we want the marquee to scroll. Its values are up, down, left or right. The default value for the direction is left i.e the marquee starts from the right and moves across towards the left.
<html>
<body>
<marquee direction = "right">Marquee moving left to right</marquee>
</body>
</html>
behavior – It indicates the scrolling type of the content. The possible values for this attribute is scroll, slide and alternate. E.g. the value like scroll, slide and alternate.
<html>
<body>
<marquee behavior = "alternate">Scrolling Marquee with alternate behavior</marquee>
</body>
</html>
scrolldelay – This indicates the delay between each marquees display. The amount of delay in assigned in milliseconds. The default value for this attribute is 85.
<html> <body> <marquee scrolldelay = "200">Marquee with scrolldelay</marquee> </body> </html>
scrollamount – This indicates the speed of the content or the marquee text. It can have values like 10, 20 etc. The default value for this attribute is 6. The attributes scrolldelay and scrollamount when used together provides good control of the pace and display of the marquee.
<html>
<body>
<marquee scrollamount = "200">Marquee with scrollamount </marquee>
</body>
</html>
bgcolor – This attribute sets the background color of the marquee. The color can be specified as color name or color hex value.
<html>
<body>
<marquee bgcolor = "cyan">Marquee with bgcolor</marquee>
</body>
</html>
loop – This attribute specifies the number of times a marquee should loop. By default, the marquee loops endlessly and so its default value is INFINITE.
<html>
<body>
<marquee loop = "2">Marquee with loop</marquee>
</body>
</html>
hspace – This attribute specifies the horizontal space to the left and right of the marquee. It can have values like 20, 40% etc.
<html>
<body>
<marquee hspace = "20">Marquee with hspace</marquee>
</body>
</html>
vspace – This attribute specifies the vertical space to the top and bottom of the marquee. It can have values like 20, 40% etc.
<html>
<body>
<marquee vspace = "20">Marquee with vspace</marquee>
</body>
</html>
Moving on with this article on Styling Marquees in HTML and CSS
Web Development Full Course for Beginners
CSS Marquees
CSS marquees are the standard ways of creating marquees. They are taking the place of HTML marquees by providing more features for scrolling text content and images.
The marquees in CSS are created using the CSS animation property along with the @keyframes to manipulate the element and create the animation.
Additionally, we need to use translateX() and translateY() in order to specify the path to the scrolling contents. The benefit of using this approach is that it is fully compliant with the CSS standards.
Scrolling Text
Here the translateX() is used to specify the content placement at the start and finish of the animation. It keeps moving between the start and end point throughout the animation.
<html> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A.cssmarquee%20%7B%0Aheight%3A%2050px%3B%0Aoverflow%3A%20hidden%3B%0Aposition%3A%20relative%3B%0A%7D%0A.cssmarquee%20h1%20%7B%0Afont-size%3A%202em%3B%0Acolor%3A%20turquoise%3B%0Aposition%3A%20absolute%3B%0Awidth%3A%20100%25%3B%0Aheight%3A%20100%25%3B%0Amargin%3A%200%3B%0Aline-height%3A%2050px%3B%0Atext-align%3A%20center%3B%0Atransform%3AtranslateX(100%25)%3B%0Aanimation%3A%20cssmarquee%2010s%20linear%20infinite%3B%0A%7D%0A%40keyframes%20cssmarquee%20%7B%0A0%25%20%7B%0Atransform%3A%20translateX(100%25)%3B%0A%7D%0A100%25%20%7B%0Atransform%3A%20translateX(-100%25)%3B%0A%7D%0A%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" /> <div class="cssmarquee"> <h1>Eurekaaa..Scrolling Text </h1> </div> <html>
Slide-In Text
When can make the content slide in by setting the translateX() values to zero or any positive value and remove the infinite settings for animation. Here we also use ease-out of the animation as we require to slow down the text before it stops finally.
<html> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A.cssmarquee%20%7B%0Aheight%3A%2050px%3B%0Aoverflow%3A%20hidden%3B%0Aposition%3A%20relative%3B%0A%7D%0A.cssmarquee%20h1%20%7B%0Aposition%3A%20absolute%3B%0Awidth%3A%20100%25%3B%0Aheight%3A%20100%25%3B%0Amargin%3A%200%3B%0Aline-height%3A%2050px%3B%0Atext-align%3A%20left%3B%0Aanimation%3A%20cssmarquee%205s%20ease-out%3B%0A%7D%0A%40keyframes%20cssmarquee%20%7B%0A0%25%20%7B%0Atransform%3A%20translateX(200%25)%3B%0A%7D%0A100%25%20%7B%0Atransform%3A%20translateX(0%25)%3B%0A%7D%0A%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" /> <div class="cssmarquee"> <h1>Eurekaaa..Slide-In Text </h1> </div> <html>
Left to Right
In order to make the text content scroll in the opposite direction i.e. left to right, we should reverse the values for translateX()
<html> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A.cssmarquee%20%7B%0Aheight%3A%2050px%3B%0Aoverflow%3A%20hidden%3B%0Aposition%3A%20relative%3B%0A%7D%0A.cssmarquee%20h1%20%7B%0Aposition%3A%20absolute%3B%0Awidth%3A%20100%25%3B%0Aheight%3A%20100%25%3B%0Acolor%3A%20turquoise%3B%0Amargin%3A%200%3B%0Aline-height%3A%2050px%3B%0Atext-align%3A%20center%3B%0A%2F*%20Starting%20position%20*%2F%0Atransform%3AtranslateX(-100%25)%3B%0Aanimation%3A%20cssmarquee%2010s%20linear%20infinite%3B%0A%7D%0A%40keyframes%20cssmarquee%20%7B%0A0%25%20%7B%0Atransform%3A%20translateX(-100%25)%3B%0A%7D%0A100%25%20%7B%0Atransform%3A%20translateX(100%25)%3B%0A%7D%0A%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" /> <div class="cssmarquee"> <h1>Eurekaa....Left to Right... </h1> </div> </html>
Scroll Vertically
To make the content scroll vertically, we need to use translateY() instead of translateX() we used in earlier examples..
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A.cssmarquee%20%7B%0Aheight%3A%20200px%3B%0Aoverflow%3A%20hidden%3B%0Aposition%3A%20relative%3B%0A%7D%0A.cssmarquee%20h1%20%7B%0Aposition%3A%20absolute%3B%0Acolor%3A%20turquoise%3B%0Awidth%3A%20100%25%3B%0Aheight%3A%20100%25%3B%0Amargin%3A%200%3B%0Aline-height%3A%2050px%3B%0Atext-align%3A%20center%3B%0Atransform%3A%20translateY(-100%25)%3B%0Aanimation%3A%20cssmarquee%2010s%20linear%20infinite%3B%0A%7D%0A%40keyframes%20cssmarquee%20%7B%0A0%25%20%7B%0Atransform%3A%20translateY(-100%25)%3B%0A%7D%0A100%25%20%7B%0Atransform%3A%20translateY(100%25)%3B%0A%7D%0A%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" /> <div class="cssmarquee"> <h1>Eurekaa..Scrolling down... </h1> </div>
Bouncing Text
This is used to make the content move to and fro like a bouncing ball. To render bouncing nature in the content we need add alternate to the animation property at the end. Later we can also optionally modify the values for translateX() so that the content does not bounce out of the page.
<html> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A.cssmarquee%20%7B%0Aheight%3A%2050px%3B%0Aoverflow%3A%20hidden%3B%0Aposition%3A%20relative%3B%0A%7D%0A.cssmarquee%20h1%20%7B%0Aposition%3A%20absolute%3B%0Acolor%3A%20turquoise%3B%0Awidth%3A%20100%25%3B%0Aheight%3A%20100%25%3B%0Amargin%3A%200%3B%0Aline-height%3A%2050px%3B%0Atext-align%3A%20left%3B%0Aanimation%3A%20cssmarquee%202s%20linear%20infinite%20alternate%3B%0A%7D%0A%40keyframes%20cssmarquee%20%7B%0A0%25%20%7B%0Atransform%3A%20translateX(70%25)%3B%0A%7D%0A100%25%20%7B%0Atransform%3A%20translateX(0%25)%3B%0A%7D%0A%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" /> <div class="cssmarquee"> <h1>Eurekaa...Bouncing text... </h1> </div> <html>
Another way to create Marquee in CSS
The marquee-style property is another way to style a marquee in CSS. It provides the capability to scroll, bounce or slide in the content. However, this approach is not widely used and using the earlier approach is recommended.
The possible parameters that can be used along with the CSS marquees are:
scroll: This states that the content should scroll from one end of the element to the other end. Once it reached the other side the content disappears and then again starts scrolling. This is the default value for the marquees.
slide: This makes the content slide from one end of the element and continues to slide until it reaches the other end and all of the content is displayed.
alternate: This makes the content scroll from one end of the element to another end and then make it bounce back and forth.
initial: It sets the default value for the property.
inherit: It sets the value inherited from the parent element.
none: This does not move the content.
Although the marquees are supported by all browsers, but they are some old browsers webkit based that might not support this property. Hence it is required to add the prefix -webkit- to interpret the marquess in these old browsers. E.g. -webkit-marquee-style.
Moving on with this article on Styling Marquees in HTML and CSS
HTML Marquees vs CSS Marquees
HTML Marquees are defined using the <marquee> tag. This approach provides us a quick way to create marquees and add them easily in our web pages. The <marquee> tag has some special attributes which can create scrolling text and images. This style of coding with html make the code easy to read and create marquee within a short span of time.
The issue with the using the HTML marquee or <marquee> tag is that it is not fully compliant with official HTML standards. As the <marquee> tag is not part of the HTML specification, so if we want to create our HTML web pages that are fully compliant, we should use CSS marquees instead of HTML marquees.
CSS Marquees are in-line with the official CSS specification. It internally uses CSS animations which are also included in the CSS specifications and so, it allows us to create fully compliant web pages using marquees.
Also, CSS marquees are more powerful and offer more advanced features to create and style our marquees. However, the downside of these types of marquees is they take relatively longer to code and are complex for beginners.
Example:
HTML Marquee- Scrolling
<marquee behavior="scroll" direction="left">
<h1>HTML text scrolling...</h1>
</marquee>
CSS Marquee- Scrolling
<html>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A.cssmarquee%20%7B%0A%20height%3A%2050px%3B%20%20%0A%20overflow%3A%20hidden%3B%0A%20position%3A%20relative%3B%0A%7D%0A.cssmarquee%20h1%20%7B%0A%20font-size%3A%202em%3B%0A%20color%3A%20turquoise%3B%0A%20position%3A%20absolute%3B%0A%20width%3A%20100%25%3B%0A%20height%3A%20100%25%3B%0A%20margin%3A%200%3B%0A%20line-height%3A%2050px%3B%0A%20text-align%3A%20center%3B%20%20%20%20%0A%20transform%3AtranslateX(100%25)%3B%0A%20animation%3A%20cssmarquee%2010s%20linear%20infinite%3B%0A%7D%0A%20%0A%40keyframes%20cssmarquee%20%7B%0A%200%25%20%20%20%7B%20%0A%20transform%3A%20translateX(100%25)%3B%20%20%20%20%20%20%20%0A%20%7D%0A%20100%25%20%7B%20%0A%20%0A%20transform%3A%20translateX(-100%25)%3B%20%0A%20%7D%0A%7D%0A%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
<div class="cssmarquee">
<h1>CSS..Text Scrolling </h1>
</div>
</html>
We can clearly see from the above example that both examples demonstrate similar results. However, creating a scrolling text with CSS is a little more complex and requires a lot more to code. One the other hand the benefit of using CSS marquees is that it offers us a lot more features to style our scrolling content and makes our browser fully complaint to works across various browsers.
This concludes everything about marquees in HTML and CSS. Its provides a great way to style animations in our content be it text or any image. We should exploit all the options that it offers and create different marquees behavior. It is important to know about the animation and marquees in details for web developers. This can help to create dynamic content web pages.
Learn how to integrate backend services into your Flutter apps in a comprehensive Flutter App Development Course.
Check out our Full Stack Development Course which comes with instructor-led live training and real-life project experience. This training makes you proficient in skills to work with back-end and front-end web technologies. It includes training on Web Development, jQuery, Angular, NodeJS, ExpressJS, and MongoDB.
Got a question for us? Please mention it in the comments section of “Marquees in HTML” blog and we will get back to you.