Wie man mehrere Texte mit CSS/jQuery wie auf Droplr ein-/ausblendet?

Ich habe diese Art von Animation auf einer Website gesehen, gerade als CSS3-Keyframes an Fahrt gewonnen haben, aber nicht gefunden oder mit CSS oder jQuery repliziert werden konnten, und hier dachte ich, dass einige von Ihnen helfen könnten .Wie man mehrere Texte mit CSS/jQuery wie auf Droplr ein-/ausblendet?

Ich habe animiert, was ich zu erreichen hoffe und ich habe es unten eingebettet. Ich glaube, dass dies mit den neuen CSS3-Schlüsselbildern oder jQuery's .animate(); Feature. Ich weiß es nicht. Ich habe alles versucht, was ich weiß, aber alles vergebens.

Hier ist die GIF-Animation von dem, was ich wollte:

GIF animation where the text "I am" is static and the word "invincible" fades out, the word "awesome" fades in, the word "awesome" fades back out, and the word "invincible" fades back in, in an infinite loop.

Ich habe gerade bemerkt, http://droplr.com/ verwendet einen sehr ähnlichen Übergang auf ihrer Homepage, aber mit einem paar Schiebeeffekten. Und die Daten (Wörter), die auftauchen, sind alle zufällig, die ganze Zeit. Ich würde gerne wissen, wie das möglich ist!

Quelle

2013-06-22 Amruth Pillai

DEMO

Eine mögliche Lösung mit reinem CSS!

@-webkit-keyframes fade-in{ 
from{ 
    opacity:1; 
    top:0px; 
} 
to{ 
    opacity:0; 
    top:-5px; 
} 
} 
.text-animated-one{ 
display:inline; 
position:relative; 
top:0px; 
-webkit-animation:fade-in 1s infinite; 

} 
.text-animated-two{ 
opacity:0; 
display:inline; 
position:relative; 
margin-left:-56px; 
-webkit-animation:fade-in 1s infinite; 
-webkit-animation-delay:0.5s; 
} 

.aggettivi{ 
display:inline; 
width:100px; 
height:100px; 
}

Quelle

2013-06-23 00:06:28 rkpasia

Perfekt! : D Vielen Dank! –

Etwas wie folgt aus:

JSFiddle Demo

HTML

<p>I am <span>Something</span><span class="hidden">Test22222</span></p>

CSS

.hidden {display:none;} 
span { position: absolute; left:45px; top:10px;} 
p {width:200px; border:1px solid #000; padding:10px; position:relative;}

jQuery

$(document).ready(function() { 

    // run the fade() function every 2 seconds 
    setInterval(function(){ 
     fade(); 
    },2000); 


    // toggle between fadeIn and fadeOut with 0.3s fade duration. 
    function fade(){ 
     $("span").fadeToggle(300); 
    } 

});

Hinweis: dies funktioniert nur mit zwei Worten Makel, könnte es besser sein, eine Reihe von Worten zu haben, und eine Funktion einer Schleife durch denjenigen zu schreiben und die `fadeIn/fadeOut Animation anwenden .

bearbeiten: Hier ist eine Lösung für mehrere Wörter - https://stackoverflow.com/a/2772278/2470724 es ein array verwendet jedes Wort zu speichern und dann durch sie Schleifen.

Edit 2: Nicht-Array-Lösung: http://jsfiddle.net/kMBMp/ Diese Version durch eine un-ordered list Schleifen, die display:none drauf hat

Quelle

2013-06-22 19:29:08

Ich war gerade dabei, frage dich nach einer Option für mehr Wörter! : D Eine Funktionsschleife? Mein Fehler, dass ich dachte, das würde ein Spaziergang im Park werden, um zu programmieren: P Danke, dass du dir die Zeit genommen hast, dies aufzuschreiben, aber es ist sicherlich hilfreich. Sehen Sie sich meinen Beitrag zu dieser Frage an, um mehr über das Thema zu erfahren. –

@Amruth A. Pillai Ich habe gerade gefunden, was Sie für mehrere Wörter wollen - http://StackOverflow.com/a/2772278/2470724 Das ist, was ich dachte, für die Lösung zu schreiben. Sie haben also ein "Array" von Wörtern. Wie folgt: var terms = ["term 1", "term 2", "term 3"] ' –

Einige umfangreiche Google Suche und Experimentieren hat mich zu dem Punkt geführt, wo ich meine eigene Frage beantworten können, und gerade noch rechtzeitig!

Wenn einer von euch würde gerne wissen, wie das getan werden kann, um diesen CodePen Besuch Snippet Ich schrieb: http://codepen.io/AmruthPillai/pen/axvqB

Quelle

2013-06-22 19:52:41

@ Nick-R Diese Methode beinhaltete die Eingabe der Wörter im jQuery-Skript selbst. Wie wäre es, wenn der Inhalt dynamisch ist? Wie auch immer, ich habe einen Weg gefunden, HTML als Datenquelle und jQuery als Animator zu verwenden. Schauen Sie sich den Link in der obigen Antwort an! :) –

Froh, dass du eine Lösung gefunden hast :) Nun, ich habe das Beispiel neu geschrieben, das ich gefunden habe (das, das ein 'Array' verwendet, um die Wörter zu speichern) - Das ist meine modifizierte Version - http://jsfiddle.net/kMBMp/ 1/Es funktioniert durch das Durchlaufen der "ungeordneten" Liste, die "display: none" hat. Also würde diese Methode definitiv funktionieren, wenn die Wörter "dynamisch generiert" würden. –

Der niedrigste Aufwand Ansatz ist wahrscheinlich die Morphext jQuery-Plug-in zu verwenden:

https://github.com/MrSaints/Morphext

Es wird von belebter angetrieben.CSS, so ist es einfach, den Animationsstil des Textes zu ändern.

Wenn Sie sich für etwas ein bisschen stärker suchen (in und out-Animationen geben, animiert nicht nur Text), gibt es einen Spin-off Morphist genannt:

https://github.com/MrSaints/Morphist

Quelle

2016-02-01 23:23:30

Wie man mehrere Texte mit CSS/jQuery wie auf Droplr ein-/ausblendet?

Antwort

Verwandte Themen