How to make a marquee without the tag marquee?

Question

How to make a marquee without the tag marquee?

Navigation

#1 by (12 votes)
#2 by (3 votes)

13

I need to use a 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 MDN website it says this:

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

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

<marquee>Texto aqui</marquee>

javascript html css css3

asked by anonymous 04.04.2014 / 23:19

2 answers


                                                                                    
                                                                                                            
                            
                                
                                    
                                    3
                                    
                                
                            
                            
                                
                                    
                                        
 There are a couple of alternatives: 


 Cross Browser marquee:  link 

 jScroller - Autoscroller for jQuery:  link 

 Cross Browser Ticker / Marquee:  link 

 jQuery plugins - Marquee:  link 


 Source:  link  
    
                                    
                                    
                                         
                                        

                                                                                  04.04.2014 / 23:22



                    
        

         
                            What is the difference between ordered, unordered and sorted?
                                        How many parameters should a method have?

score 12 · Accepted Answer

As a matter of fact, the <marquee> tag is considered obsolete in HTML5 , since it is an element focused on behavior and appearance, not content structure. Therefore, it is recommended that something similar be done with CSS and / or JavaScript.

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

.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>

Demo

The operation is very simple:

The rules in .marquee define the appearance of the outer box. Important detail is white-space: nowrap; , which holds the content in a single line.
The rules in .marquee span push the contents all the way to the right (so that the marquee starts empty), and the basic parameters of the animation (called marquee ), lasting 15 seconds and infinite repetition.
@keyframes marquee defines two keyframes 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.