CSS-Animation beginnt bei Hover, stoppt dann

Vielen Dank im Voraus für jede Hilfe.CSS-Animation beginnt bei Hover, stoppt dann

Ich habe mit ein paar Effekten arbeiten, was ich finden mögen, und auf diese Seite gestolpert: https://www.marieforleo.com/

Der dritte Abschnitt nach unten (black bg) hat das Wort „alles“ unterstrichen, und wenn Sie rollen Sie darüber hinweg, es löst eine Sequenz aus, in der sich dieses Wort in eine Vielzahl anderer Wörter ändert.

Ich habe versucht, eine verwandte Anleitung zu finden, aber kein Glück. Sie fragen sich, ob jemand in der Lage ist, den Weg zu diesem Effekt zu weisen, sei es durch css3 alleine oder mit jquery. Im Idealfall würde die Animation stoppen, wenn sie das Ende ihrer "Wortoptionen" erreicht hat.

Vielen Dank! Hier

Quelle

2016-12-18 Jordan Warner

Zeigen Sie uns, was haben Sie versucht? –

Hallo Saurav, danke! Diese Art von Code ist nicht meine primäre Stärke, also passe ich meistens andere Dinge an, die ich gefunden habe. Ich habe versucht, mit diesen zu arbeiten (https://codyhouse.co/gem/css-animated-headlines/) und mochte es, aber der Effekt war zu aufdringlich für das, was wir brauchen. Ich habe auch versucht https://tympanus.net/codrops/2012/04/17/roting-words-with-css-animations/, konnte aber keine Möglichkeit finden, die Looping-Animation zu stoppen, was sie übermäßig störend machte. Für diese Zwecke begann ich zu erkennen, etwas auf Hover würde besser funktionieren, was mich zu der Wirkung führte, die ich gepostet habe. Darüber hinaus bin ich mir nicht sicher, wo ich anfangen soll. –

ist eine Möglichkeit, es mit reinem CSS zu tun: „animieren“, um den Inhalt von Pseudoelement

.words::before { 
 
    content: "hello"; 
 
} 
 

 
.words:hover::before { 
 
    animation: rotateWords 5s; 
 
} 
 

 
@keyframes rotateWords { 
 
    20% { content: 'world' } 
 
    40% { content: 'foo' } 
 
    60% { content: 'bar' } 
 
    80% { content: 'lorem' } 
 
    100% { content: 'ipsum' } 
 
}

<span class="words"></span>

Quelle

2016-12-18 05:41:46 Aziz

Hallo Aziz, danke für die bemerkenswert schnelle Antwort! Das ist ein guter Anfang. Gibt es eine Möglichkeit, die Ergebnisse zufällig zu verteilen, statt sie jedes Mal in der gleichen Reihenfolge anzuzeigen? –

Eine andere Anmerkung - Ich bemerkte auf marieforleo.com, dass das obere linke Logo ganz oben auf der Seite einen ähnlichen Effekt hat. Nochmals vielen Dank für die schnelle Hilfe! –

Sie Javascript verwenden könnten, um zufällig ein Wort zu wählen und injiziert es auf schweben . Wenn Sie nicht danach suchen, können Sie eine For-Schleife in einem Sass-Mix verwenden. So etwas sollte funktionieren.

Dies sollte ein Wort aus der $ words Liste an einer zufälligen Position zwischen 1 und der Länge der Wörterliste auswählen. Dies bedeutet, dass das ursprüngliche Wort aus einem Inhaltsblock gezogen wird.

Quelle

2016-12-24 17:16:27

CSS-Animation beginnt bei Hover, stoppt dann

Antwort

Verwandte Themen