How do I make a Marquee without the <Marquee> tag?

Asked

Viewed 4,757 times

17

I need to wear one Marquee, but as everyone is saying Marquee is a prehistoric thing and should not be used anymore, I am in doubt as to what to use in his place. On the site of MDN says this:

This feature is obsolete. Although it may still work in some browsers, its use is discouraged as it can be removed at any time. Try to avoid use.

What are my options? I am looking for something that is as close to:

<marquee>Texto aqui</marquee>
javascript html css css3

3 answers

19


In fact to tag <marquee> is considered obsolete in HTML5, because it is an element focused on behavior and appearance, and not on content structure. Therefore, it is recommended that something similar be done with CSS and/or Javascript.

Below is a CSS-only solution, based on an answer in English. Note that the example uses the -prefix-free to make CSS cleaner (this is a JS that adds prefixes to you, so that resources that depend on prefixes, like -webkit, -moz and -ms, operate in the largest possible number of browsers).

.marquee {
  width: 100px;
  height: 22px;
  overflow: hidden;
  white-space: nowrap;
  border: 1px solid #ccc;
  padding: 2px;
}
.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 15s linear infinite;
}
@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}
<div class="marquee"><span>Lorem ipsum dolor sit amet</span></div>
Demonstration

The operation is very simple:

  • The rules in .marquee define the appearance of the outer box. Important detail is the white-space: nowrap;, that keeps the content in a single line.

  • The rules in .marquee span push the whole content to the right (so that the empty start), and the basic parameters of the animation (called marquee), with a duration of 15 seconds and infinite repetition.

  • @keyframes marquee sets two key frames for the animation, one with the content in the original position, and the other for the content fully shifted to the left at the end of the animation.

  • Tip: I could change translateX(x) for translate(x,y), so it could combine with other possible effects and or combinations if necessary :)

  • Yeah, but not anymore?

  • 2

    i was editing the comment and reversed the order, the correct would be: change translate(x,y) for translateX(x)

  • @Guilhermenascimento Gave laziness to change, but is a +1 in the suggestion.

3

  • 3

    Ta crazy, I prefer to use Marquee doque use 300 lines for a simple thing

  • 6

    @Josimara actually Marquee and Blink have always been very unpleasant, regardless of the number of lines. Rejection has always been largely by people, who probably haven’t made a simple CSS equivalent to discourage this use.

-1

For images I gave this changed.

#slider{
    position: absolute;
    scroll-padding-bottom: 50px;
    right: 0;
    background: transparent;
    width: 150px;
    height: 50px;
    animation: anima 20s linear infinite;
 }
 
 @keyframes anima{
    from {right: 0}
    to {right: 100%}
 }
<img src="img/well.jpg" id="slider" alt="Instalador de painel Solar">

Browser other questions tagged javascript html css css3

You are not signed in. Login or sign up in order to post.