CODEWITHSUNDEEP
html
Computings
Computings

Reputation: 119

What is the equivalent of <marquee> tag in HTML5?

In HTML 4, there is this <marquee> tag that shows sliding text across the screen.
What is its equivalent in HTML5?

Upvotes: 10

Views: 12924

Answers (3)

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24424

By css animation you can do the same thing

.holder {
  background:#ccc;
  padding:0.5rem;
  overflow: hidden;
}
.news {
  animation : slide 10s linear infinite;
  
}

@keyframes slide {
  0% {
    transform: translatex(0%)
  }

  100% {
    transform: translatex(100%)
  }
}
<div class="holder">
  <div class="news">Hello....</div>
</div>

Upvotes: 21

Tarik Tutuncu
Tarik Tutuncu

Reputation: 818

You can achieve this by using browser vendor specific CSS and CSS3 specifications.

Here is an example:

{
  width: 200px; height: 50px; white-space: nowrap;
  overflow: hidden;
  overflow-x:-webkit-marquee;
  -webkit-marquee-direction: forwards;
  -webkit-marquee-style: scroll;
  -webkit-marquee-speed: normal;
  -webkit-marquee-increment: small;
  -webkit-marquee-repetition: 5;
  overflow-x: marquee-line;
  marquee-direction: forward;
  marquee-style: scroll;
  marquee-speed: normal;
  marquee-play-count: 5;
}

Check out this post for explanation of each property

Upvotes: 0

daGo
daGo

Reputation: 2968

There is no such alternative. The behavior provided by <marquee> can be achieved using css/js though.

Upvotes: 0

Related Questions