CSS Marquee

HTML marquee provides a standard way of creating scroll texts, slide-in, and bouncy texts as well as images in your web page. In this chapter, you will learn about the marquee, but the implementation will be done with CSS.

What are Marquees?

Marquee is an animation effect for web pages that are used to create horizontal or vertical scrolling text and images. The <marquee> element of HTML is not a standard-compliant, ie the element is not part of the W3 HTML specifications.

For creating a marquee using CSS, you have to use the CSS animation property together with the @keyframes rule. Let us now see its variations with implementation.

Scrolling Text Using CSS

Here you have to implement translateX() for determining the position of the text at the beginning or end of the animation. Your text will then move among these two assigned points as the animation progresses.

Example:
<!DOCTYPE html>
<html>

<body>
    <style style="text/css">
        .marquee {
            height: 50px;
            overflow: hidden;
            position: relative;
            background: #fefefe;
            color: #333;
            border: 1px solid #4a4a4a;
        }
        
        .marquee p {
            position: absolute;
            width: 100%;
            height: 100%;
            margin: 0;
            line-height: 50px;
            text-align: center;
            -moz-transform: translateX(100%);
            -webkit-transform: translateX(100%);
            transform: translateX(100%);
            -moz-animation: scroll-left 2s linear infinite;
            -webkit-animation: scroll-left 2s linear infinite;
            animation: scroll-left 20s linear infinite;
        }
        
        @-moz-keyframes scroll-left {
            0% {
                -moz-transform: translateX(100%);
            }
            100% {
                -moz-transform: translateX(-100%);
            }
        }
        
        @-webkit-keyframes scroll-left {
            0% {
                -webkit-transform: translateX(100%);
            }
            100% {
                -webkit-transform: translateX(-100%);
            }
        }
        
        @keyframes scroll-left {
            0% {
                -moz-transform: translateX(100%);
                -webkit-transform: translateX(100%);
                transform: translateX(100%);
            }
            100% {
                -moz-transform: translateX(-100%);
                -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
            }
        }
    </style>

    <div class="marquee">
        <p> Marquee in CSS </p>
    </div>
</body>

</html>

Scrolling Images Using CSS

For making a scrolling image or animated content for your page, you have to replace your text (from the previous example) simply with any image of your choice. In addition, you have to make use of the <div> element and as a nested tag put the <img> tag within the <div>.

Bouncing Texts Effect

This animation feature of the marquee will bounce back once it reaches the end (left or right) of your page.

Example:
<!DOCTYPE html>
<html>

<body>
    <style style="text/css">
        .bounce {
            height: 50px;
            overflow: hidden;
            position: relative;
            background: #fefefe;
            color: #333;
            border: 1px solid #4a4a4a;
        }
        
        .bounce p {
            position: absolute;
            width: 100%;
            height: 100%;
            margin: 0;
            line-height: 50px;
            text-align: center;
            -moz-transform: translateX(50%);
            -webkit-transform: translateX(50%);
            transform: translateX(50%);
            -moz-animation: bouncing-text 5s linear infinite alternate;
            -webkit-animation: bouncing-text 5s linear infinite alternate;
            animation: bouncing-text 10s linear infinite alternate;
        }
        
        @-moz-keyframes bouncing-text {
            0% {
                -moz-transform: translateX(50%);
            }
            100% {
                -moz-transform: translateX(-50%);
            }
        }
        
        @-webkit-keyframes bouncing-text {
            0% {
                -webkit-transform: translateX(50%);
            }
            100% {
                -webkit-transform: translateX(-50%);
            }
        }
        
        @keyframes bouncing-text {
            0% {
                -moz-transform: translateX(50%);
                -webkit-transform: translateX(50%);
                transform: translateX(50%);
            }
            100% {
                -moz-transform: translateX(-50%);
                -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
            }
        }
    </style>

    <div class="bounce">
        <p> Bouncy Marquee </p>
    </div>
</body>

</html>

Here are few other related articles for you to read:

Scroll Back to Top