HTML CSS Marquee Animation

10+ HTML CSS Marquee Examples - csshint - A designer hub

Let's make a simple animation scroll text by using HTML marquee tag.

  • HTML <marquee> tag use to create a scrolling text from left to right, right to left, top to bottom, bottom to top. There is no limit. HTML Marquee tag is use to display text in marquee style, Also we can scroll div or image.

  • <marquee> tag is a container tag.

  <div id="div1">
    Test-1 Test-2 Test-3 Test-4 Test-5 Test-6 Test-7 Test-8 Test-9 Test-10 T  </div>
#div1 {
  display: inline-block;
  animation: marquee 10s linear infinite;
}

Also we can use it in a different way like rhis :-

Continuous Text Scrolling:-

 <marquee behavior="scroll" direction="left">Continious Text Scrolling</marquee>

Slide stop text:-

 <marquee behavior="slide" direction="left">Slide stop text</marquee>
Side Touch Margin Bounce Text:-
 <marquee behavior="alternate" direction="left">Side Touch Margin Bounce Text</marquee>

Upside and downside Text Scrolling

  <marquee behavior="scroll" direction="up">Upside Text Scrolling</marquee>
<marquee direction="down">
This is a sample scrolling text that has scrolls texts to down.
</marquee>

Marquee scroll speed

Marquee speed can be changed using the "scrollmount" attribute. For example, if you are using scrollmount="1" then it sets the marque to scroll very slowly, and as you increase the "scrollmount," the scrolling speed will also increase.

 <marquee behavior="scroll" direction="left" scrollamount="3">Slow speed scroll speed</marquee>
  <marquee behavior="scroll" direction="left" scrollamount="10">Medium speed scroll speed</marquee>
  <marquee behavior="scroll" direction="left" scrollamount="17">Fast speed scroll speed</marquee>

Blinking text with marquee

         <marquee class="blink">This is an example of blinking text using CSS within a marquee.</marquee>

         <style>
            .blink {
                animation: blinker 1.5s linear infinite;
                color: red;
                font-family: sans-serif;
            }
            @keyframes blinker {
                50% {
                    opacity: 0;
                }
            }
        </style>

References :-

https://www.w3schools.in/html/marquee-tag