HTML Marquee Tag

What is the equivalent of marquee tag in HTML5?

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>

HTML | What is marquee and what can i do with it?

<marquee> is an old HTML element that causes whatever content inside of it to scroll across the viewport from right to left by default.

It may still work in some browsers for backwards compatibility, but it is no longer officially supported in HTML and should be avoided. That's why you are not finding it on tutorial sites. And since it is no longer supported, there is no guarantee that even if it works in some browsers today, it will continue to work in new versions of those browsers tomorrow.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee

is marquee supported in html5?

From MDN

The HTML <marquee> element is used to insert a scrolling area of text. You can control what happens when the text reaches the edges of its content area using its attributes.

The element is obsolete and must not be used. While some browsers still support it, it's not required.

Marquee in CSS3

body {
  margin: 20px;
}

.marquee {
  height: 25px;
  width: 420px;
  overflow: hidden;
  position: relative;
}

.marquee div {
  display: block;
  width: 200%;
  height: 30px;
  position: absolute;
  overflow: hidden;
  animation: marquee 5s linear infinite;
}

.marquee span {
  float: left;
  width: 50%;
}

@keyframes marquee {
  0% {
    left: 0;
  }
  100% {
    left: -100%;
  }
}

<div class="marquee">
  <div>
    <span>You spin me right round, baby. Like a record, baby.</span>
    <span>You spin me right round, baby. Like a record, baby.</span>
  </div>
</div>

How can I change the attribute scrollamount of a Marquee Tag in a Javascript function?

Marquee cannot change direction while running. You have to stop it, change direction then start again, but it will start from the beginning

This said, marquee is deprecated.DO NOT USE IT.

You can (and should) use CSS animations, like shown here:https://www.quackit.com/css/codes/marquees/.

Once implemented, you can use javascript to change the css animation.

How do I change the size of a marquee text?

Just add CSS

marquee {
  font-size: xx-large;
}

<marquee behavior="scroll" direction="left" scrollamount="30">Sidebar Test</marquee>

---

Related Topics