How to Create a Marquee on a Website

A marquee is a web element in which text or other information continuously moves across the screen. This effect used to be very popular in web design. It was especially common on websites in the early 2000s, where news, announcements, and various messages would literally “run” across the page.

Today, marquees are much less common. Modern web design usually favors a calmer way of presenting information, while CSS animations and JavaScript are used for dynamic elements. Nevertheless, the marquee has not completely disappeared. It can still be found on news websites, online stores, and various widgets.

In some cases, moving text can actually be useful. For example, it can attract attention to an important message, display a short news item, or place a large amount of information in a limited amount of space.

In this article, we will look at two ways to create a marquee: a modern approach using CSS and the old but still well-known HTML <marquee> element.

Creating a Marquee with CSS

Let’s start with the modern approach. No JavaScript is required — only HTML and CSS.

We will create a container that hides the text when it moves outside its boundaries:

<div class="ticker">
    <div class="ticker__track">
        <span>Important information — Website news — Discounts — New arrivals</span>
        <span>Important information — Website news — Discounts — New arrivals</span>
    </div>
</div>

Now let’s add the CSS:

.ticker {
    overflow: hidden;
    white-space: nowrap;
}

.ticker__track {
    display: inline-flex;
    width: max-content;
    animation: ticker 20s linear infinite;
}

.ticker__track span {
    padding-right: 50px;
}

@keyframes ticker {
    to {
        transform: translateX(-50%);
    }
}

Let’s see how it works.

The .ticker element has overflow: hidden. This prevents text that moves outside the container from being visible.

The white-space: nowrap property prevents the text from wrapping onto a new line.

The text itself is placed inside .ticker__track, which uses width: max-content to make its width match its content. A CSS animation is then applied:

animation: ticker 20s linear infinite;

Here, 20s is the duration of one animation cycle. The smaller the value, the faster the text moves.

The key part of this approach is that the text is placed inside the track twice:

<span>Important information — Website news — Discounts — New arrivals</span>
<span>Important information — Website news — Discounts — New arrivals</span>

This makes it possible to create continuous movement. When the first copy completely moves out of view on the left, the second copy takes its place. When the animation finishes, the cycle starts again.

This approach allows us to avoid a noticeable pause or jump between repetitions.

How to Change the Speed

The speed is controlled by the animation duration:

animation: ticker 20s linear infinite;

For example, you can make the marquee faster:

animation: ticker 10s linear infinite;

Or slower:

animation: ticker 40s linear infinite;

The larger the time value, the slower the text moves.

Pausing the Animation on Hover

Sometimes it is useful to stop the marquee when the user moves the mouse over it. This can be especially helpful when the text is long and the user needs time to read it.

Simply add:

.ticker:hover .ticker__track { 
  animation-play-state: paused; 
}

Now the animation will stop when the user hovers over the marquee and continue when the mouse leaves it.

Example on jsfiddle – https://jsfiddle.net/igorrybalko/swo25bug

The Old Way — HTML <marquee>

Now for a little bit of web history.

Before CSS animations became widely used, developers often relied on a special HTML element called <marquee> to create scrolling text:

<marquee> Important information — Website news — Discounts — New arrivals </marquee>

The browser automatically created a moving marquee from this element.

The element had various attributes that allowed developers to control its behavior. For example, the direction of movement could be changed using the direction attribute:

<marquee direction="right"> This text moves to the right </marquee>

By default, the text moves from right to left.

The movement speed could also be changed using scrollamount:

<marquee scrollamount="10"> Fast scrolling text </marquee>

And you could specify how many times the animation should repeat:

<marquee loop="3"> This text will appear three times </marquee>

It was also possible to stop the animation when the user hovered over the text:

<marquee onmouseover="this.stop()" onmouseout="this.start()" > Hover over the text </marquee>

However, there is an important detail: <marquee> is an obsolete HTML element and should not be used in new projects.

Modern HTML should describe the structure of a page, while visual effects and animations are better handled with CSS.

Which Method Should You Choose?

If you are creating a new website, you should almost always use a CSS animation.

This approach has several advantages:

• no JavaScript is required;
• the behavior can be easily controlled with CSS;
• speed and direction can be customized;
• the animation can be paused;
• the appearance can easily be adapted to the website design;
• the code follows modern web development practices more closely.

<marquee> is now mostly of historical interest. However, knowing about it can still be useful. If you come across an old website or legacy project that uses this element, you will understand where the scrolling text comes from.

Don’t Forget About Accessibility

Moving text also has a downside. Constant animation can make information harder to read, and some users may find movement on the screen uncomfortable.

For a real website, it is therefore a good idea to respect the user’s prefers-reduced-motion system setting. This allows animations to be disabled or reduced for users who prefer less motion.

For example:

@media (prefers-reduced-motion: reduce) {
    .ticker__track {
        animation: none;
    }
}

In this case, users who have enabled a reduced-motion preference will see the text without animation.

Conclusion

The marquee is one of those web design elements that reminds us of the early days of the Internet. It used to be almost everywhere, while today it is used much more carefully.

Nevertheless, the basic idea is still useful. For short news items, announcements, and other small pieces of information, a scrolling text element can sometimes be a convenient solution.

For modern websites, CSS animation is the better choice. It requires no additional libraries and gives you full control over the movement of the text. The <marquee> element, on the other hand, is best left as a piece of web development history or for maintaining legacy code.