How to Implement Styling Marquees in HTML and CSS

Last updated on Feb 22,2023 74.3K Views
Become a Certified Professional

How to Implement Styling Marquees in HTML and CSS

edureka.co

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?

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.

The marquee can be set using both HTML tags and CSS properties.

 

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:

<html>
    <body>
        <marquee width = "50%">Scrolling Marquee with 50% width</marquee>
    </body>
</html>

<html>
    <body>
        <marquee height = "50%">Scrolling Marquee with 50% height</marquee>
    </body>
</html>

<html>
    <body>
        <marquee direction = "right">Marquee moving left to right</marquee>
    </body>
</html>

<html>
    <body>
        <marquee behavior = "alternate">Scrolling Marquee with alternate behavior</marquee>
    </body>
</html>

<html>
	<body>
		<marquee scrolldelay = "200">Marquee with scrolldelay</marquee>
	</body>
</html>

<html>
    <body>
        <marquee scrollamount = "200">Marquee with scrollamount </marquee>
    </body>
</html>

<html>
    <body>
        <marquee bgcolor = "cyan">Marquee with bgcolor</marquee>
    </body>
</html>

<html>
    <body>
        <marquee loop = "2">Marquee with loop</marquee>
    </body>
</html>

<html>
    <body>
        <marquee hspace = "20">Marquee with hspace</marquee>
    </body>
</html>

<html>
    <body>
        <marquee vspace = "20">Marquee with vspace</marquee>
    </body>
</html>

Moving on with this article on Styling Marquees in HTML and CSS

 

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>
<style>
.cssmarquee {
height: 50px;
overflow: hidden;
position: relative;
}
.cssmarquee h1 {
font-size: 2em;
color: turquoise;
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
transform:translateX(100%);
animation: cssmarquee 10s linear infinite;
}
@keyframes cssmarquee {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
</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>
<style>
.cssmarquee {
height: 50px;
overflow: hidden;
position: relative;
}
.cssmarquee h1 {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: left;
animation: cssmarquee 5s ease-out;
}
@keyframes cssmarquee {
0% {
transform: translateX(200%);
}
100% {
transform: translateX(0%);
}
}
</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>
<style>
.cssmarquee {
height: 50px;
overflow: hidden;
position: relative;
}
.cssmarquee h1 {
position: absolute;
width: 100%;
height: 100%;
color: turquoise;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
transform:translateX(-100%);
animation: cssmarquee 10s linear infinite;
}
@keyframes cssmarquee {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
</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..

<style>
.cssmarquee {
height: 200px;
overflow: hidden;
position: relative;
}
.cssmarquee h1 {
position: absolute;
color: turquoise;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
transform: translateY(-100%);
animation: cssmarquee 10s linear infinite;
}
@keyframes cssmarquee {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(100%);
}
}
</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>
<style>
.cssmarquee {
height: 50px;
overflow: hidden;
position: relative;
}
.cssmarquee h1 {
position: absolute;
color: turquoise;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: left;
animation: cssmarquee 2s linear infinite alternate;
}
@keyframes cssmarquee {
0% {
transform: translateX(70%);
}
100% {
transform: translateX(0%);
}
}
</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:

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

Example:

HTML Marquee- Scrolling

<marquee behavior="scroll" direction="left">
    <h1>HTML text scrolling...</h1>
</marquee>

 

CSS Marquee- Scrolling

<html>
    <style>
.cssmarquee {
 height: 50px;  
 overflow: hidden;
 position: relative;
}
.cssmarquee h1 {
 font-size: 2em;
 color: turquoise;
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;    
 transform:translateX(100%);
 animation: cssmarquee 10s linear infinite;
}
 
@keyframes cssmarquee {
 0%   { 
 transform: translateX(100%);       
 }
 100% { 
 
 transform: translateX(-100%); 
 }
}
    </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 Web Developer Masters Program 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.

BROWSE COURSES
"PMP®","PMI®", "PMI-ACP®" and "PMBOK®" are registered marks of the Project Management Institute, Inc. MongoDB®, Mongo and the leaf logo are the registered trademarks of MongoDB, Inc.