wake-up-neo.com

CSS3 Marquee-Effekt

Ich erstelle mit der CSS3-Animation einen Marquee-Effekt. Hier sind meine Codes.

HTML-Tag:

<div id="caption">
    The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog.
</div>

CSS:

#caption
{
    position: fixed;
    bottom: 0;
    left: 0;
    font-size: 20px;
    line-height: 30px;
    height:30px;
    width: 100%;
    white-space: nowrap;
    -moz-animation:  caption 50s linear 0s infinite;
    -webkit-animation:  caption 50s linear 0s infinite;
}
@-moz-keyframes caption { 0% { margin-left:120%; } 100% { margin-left:-4200px; }  }
@-webkit-keyframes caption { 0% { margin-left:120%; } 100% { margin-left:-4200px; }  }

Jetzt kann ich den grundlegenden Marquee-Effekt erhalten, aber die Codes sind nicht klug genug.

Ich frage mich, ob es eine Möglichkeit gibt, bestimmte Werte wie margin-left:-4200px; zu vermeiden, sodass Text in beliebiger Länge angepasst werden kann.

In Firefox und Safari funktioniert es nicht reibungslos, in Chrome gut.

Hier ist eine ähnliche Demo: http://jsfiddle.net/jonathansampson/XxUXD/ , es verwendet text-indent, aber immer noch mit bestimmten Werten.

Jeder Rat wird geschätzt.

Fred

34
Fred Wu

Mit einer kleinen Änderung des Markups, hier ist mein Ansatz (ich habe gerade eine span in den Absatz eingefügt):

Beispiel-Geige: http://jsfiddle.net/MaY5A/1/ (Grenzen nur zu Debug-Zwecken enthalten, getestet auf Firefox und Chrom)


Markup

<p class="Microsoft Marquee"><span>Windows 8 and ...</span></p>

CSS

.Marquee {
    width: 450px;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}

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

.Marquee span:hover {
    animation-play-state: paused
}

/* Make it move */
@keyframes Marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

Es wurden keine fest codierten Werte - abhängig von der Absatzbreite - eingefügt

Die Animation wendet die CSS3-Eigenschaft transform an (verwenden Sie ggf. Präfixe), um eine gute Leistung zu erzielen. 

Wenn Sie zu Beginn nur einmal eine Verzögerung einfügen möchten, setzen Sie auch einen animation-delay. Wenn Sie stattdessen eine kleine Verzögerung in der every -Schleife einfügen möchten, versuchen Sie, mit einem höheren padding-left zu spielen (z. B. 150%).

76
fcalderan

Basierend auf der vorherigen Antwort, hauptsächlich @fcalderan, scrollt dieses Auswahlrechteck, wenn Sie den Mauszeiger darüber halten, mit dem Vorteil, dass die Animation auch dann vollständig scrollt, wenn der Text kürzer als der Bildlaufbereich ist ein Pro oder ein Contra sein), wenn der Text nicht in die Ausgangsposition zurückkehrt.

Kein anderer fest codierter Wert als die Bildlaufzeit, am besten geeignet für kleine Bildlaufbereiche

.Marquee {
    width: 100%;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    display: inline-flex;    
}

.Marquee span {
    display: flex;        
    flex-basis: 100%;
    animation: Marquee-reset;
    animation-play-state: paused;                
}

.Marquee:hover> span {
    animation: Marquee 2s linear infinite;
    animation-play-state: running;
}

@keyframes Marquee {
    0% {
        transform: translate(0%, 0);
    }    
    50% {
        transform: translate(-100%, 0);
    }
    50.001% {
        transform: translate(100%, 0);
    }
    100% {
        transform: translate(0%, 0);
    }
}
@keyframes Marquee-reset {
    0% {
        transform: translate(0%, 0);
    }  
}
<span class="Marquee">
    <span>This is the Marquee text</span>
</span>
2
Mosè Bottacini

Die Animation für akzeptierte Antworten funktioniert in Safari nicht . Ich habe sie mit translate anstelle von padding-left aktualisiert, um eine flüssigere, kugelsichere Animation zu erzielen.

Die Demo-Geige mit den akzeptierten Antworten hat auch eine Menge unnötiger Stile.

Also habe ich eine einfache Version erstellt, wenn Sie nur den nützlichen Code ausschneiden und einfügen möchten und nicht 5 Minuten damit verbringen möchten, die Demo zu durchlaufen.

http://jsfiddle.net/e8ws12pt/

.Marquee {
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0;
    height: 16px;
    display: block;
}
.Marquee span {
    display: inline-block;
    text-indent: 0;
    overflow: hidden;
    -webkit-transition: 15s;
    transition: 15s;
    -webkit-animation: Marquee 15s linear infinite;
    animation: Marquee 15s linear infinite;
}

@keyframes Marquee {
    0% { transform: translate(100%, 0); -webkit-transform: translateX(100%); }
    100% { transform: translate(-100%, 0); -webkit-transform: translateX(-100%); }
}
<p class="Marquee"><span>Simple CSS Marquee - Lorem ipsum dolor amet tattooed squid microdosing taiyaki cardigan polaroid single-Origin coffee iPhone. Edison bulb blue bottle neutra shabby chic. Kitsch affogato you probably haven't heard of them, keytar forage plaid occupy pitchfork. Enamel pin crucifix tilde fingerstache, lomo Unicorn chartreuse plaid XOXO yr VHS shabby chic meggings pinterest kickstarter.</span></p>
1
Pixelomo

Folgendes sollte tun, was Sie wollen.

@keyframes Marquee {
    from  { text-indent:  100% }
    to    { text-indent: -100% }
}
0
Lars Beck