CSS Marquee für variable Nachrichtenlängen

Question

Ich bin auf der Suche nach Marquee-Tag-Alternativen und fand, wie dies durch CSS zu tun. Allerdings sind die Nachrichten, die ich benutze, von variabler Länge, also gibt es eine Alternative, um das Attribut '45s' auf vielleicht 100% zu setzen, so dass die Nachricht, egal wie lang oder kurz die Nachricht ist, die gesamte Nachricht und die Schleife anzeigt erneut, sobald die Nachricht angezeigt wurde?

.marquee { 
 
    margin: 0 auto; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    position: absolute; 
 
    color: #ffffff; 
 
    background-color: #000000; 
 
    font-family: Arial Rounded MT Bold; 
 
} 
 

 
.marquee span { 
 
    display: inline-block; 
 
    padding-left: 100%; /* show the marquee just outside the paragraph */ 
 
    animation: marquee 45s linear infinite; 
 
} 
 

 

 
@keyframes marquee { 
 
    from { text-indent: 0%} 
 
    to { text-indent: -150% } 
 
}

<p id="PassengerNews_Scrollbar" class="microsoft marquee" style="height: 95%; width: 90%;left: 5%;top: 2%;font-size: 7%;"> 
 
    <span>|*NewsData*|</span> 
 
</p>

Answer 1

Sie so etwas wie dies wollen?

.marquee { 
 
    margin: 0 auto; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    position: absolute; 
 
    color: #ffffff; 
 
    background-color: #000000; 
 
    font-family: Arial Rounded MT Bold; 
 
    
 
    height: 90%; 
 
    width: 90%; 
 
    left: 5%; 
 
    top: 5%; 
 
    font-size: 7%; 
 
} 
 
.marquee .line__wrap { 
 
    display: block; 
 
    position: absolute; 
 
    width: auto; 
 
    left: 0; 
 
    animation: marquee__wrap 2s linear infinite; 
 
    
 
    font-size: 18px; 
 
} 
 
.marquee .line { 
 
    position: relative; 
 
    margin-left: -100%; 
 
    animation: marquee 2s linear infinite; 
 
} 
 
@keyframes marquee__wrap { 
 
    from { 
 
     margin-left: 100%; 
 
    } 
 
    to { 
 
     margin-left: 0%; 
 
    } 
 
} 
 
@keyframes marquee { 
 
    from { 
 
     left: 100%; 
 
    } 
 
    to { 
 
     left: 0%; 
 
    } 
 
}

<p id="PassengerNews_Scrollbar" class="microsoft marquee"> 
 
    <span class="line__wrap"> 
 
     <span class="line">|*NewsData*|</span> 
 
    </span> 
 
    
 
    <span class="line__wrap" style="top: 30px;"> 
 
     <span class="line">|*NewsData*|long long long long massage</span> 
 
    </span> 
 
</p>

Answer 2

Verwenden Sie die jQuery.Marquee Plugin (Lizenz: ISC). Wenn Sie das Plugin nicht verwenden möchten, können Sie folgenden Code-Schnipsel aus dem Plugin verwenden, um die Verzögerung

// formula is to: (Width of the text node + width of the main container/Width of the main container) * speed; 
o.duration = ((parseInt(elWidth, 10) + parseInt(containerWidth, 10))/parseInt(containerWidth, 10)) * o.duration; 

Mit o.duration mit 5000 Bedeutung 5 Sekunden initialisiert zu berechnen.