Smooth changing text

Question

Ich versuche, jede Minute automatisch ändernden Text in meiner Website hinzuzufügen. Ich bin glücklich mit meinem Code, aber ich möchte glattere Animationen, so dass der Inhalt langsamer erscheint und verschwindet. Irgendwelche Ideen?

var cit = new Array(" Cool APP", " Best App ", " Love this App", " So good "); 
 
var author = new Array("Matt"," Laz ","SoSo","JoJo"); 
 
var ind= 0; 
 
function ChangeText(){ 
 
    document.getElementById('Citation').innerHTML = cit[ind]; 
 
    document.getElementById('author').innerHTML = author[ind];   
 
    if(ind < cit.length - 1){ 
 
    ind++; 
 
    }else{ 
 
    ind = 0; 
 
    } 
 
    setTimeout("ChangeText();", 400); 
 
} 
 
ChangeText();

<p id = "Citation"> 
 
</p> 
 
<p id = "author"> 
 
</p>

Answer 1

Wir können Ihre JavaScript und HTML erhalten die gewünschte Funktionalität Verwendung von einigen CSS-Übergänge machen und erweitern. Code unter der folgenden Textbeschreibung.

Mit CSS können wir dem Browser mitteilen, bestimmte Eigenschaften mit verschiedenen Animationstechniken (ease-in, ease-out, etc.) über Zieldauern der Zeit zu ändern. Die folgenden Standardeinstellungen auf eine ease Übergang, über 1 Sekunde, alle opacity Änderungen an einem bestimmten Element Targeting, die auf die CSS-Selektor/Regel haftet (siehe w3 schools transitions für mehr).

transition: opacity 1s; 

Jetzt für die Einrichtung der HTML/Javascript, um Übergänge zu nutzen. Wir werden einige HTML-Elemente erstellen, die mit dem nächsten Zitat/Autor hin- und hergeschaltet werden. Diese werden im Wesentlichen eingeblendet, wenn wir unser Zielzitat/Autor erhöhen. Wir müssen eine absolute Positionierung verwenden, damit sich die Elemente überlappen. Wir benötigen die Hilfe einiger divs, um die Aufgabe zu erledigen (siehe HTML und css unten, beachte, dass ich 1 Sekunde Übergänge mache).

Nach unserem HTML zu definieren, haben wir die Javascript aktualisieren, um die innerHTML- der beiden nächsten und original curations/Autoren zu setzen (siehe aktualisiert ChangeCitation1() und ChangeCitation2() Methoden unten, notieren Sie die Verzögerung von 2 Sekunden, um den Text Makeln, für Sie diese wäre vielleicht 60s in Produktion).

Im Grunde haben wir eine Toggle-Funktion, die die Curations/Autoren und Curations/Autoren auf Deck setzt und die Opazität unendlich zurückfaltet. Mit Fades von 1 Sekunde und einer Änderung des Textes alle 2 Sekunden.

var cit = new Array(" Cool APP", " Best App ", " Love this App", " So good "); 
 
var author = new Array("Matt"," Laz ","SoSo","JoJo"); 
 
var ind= 0; 
 
document.getElementById('Citation1').innerHTML = cit[ind]; 
 
document.getElementById('Author1').innerHTML = author[ind]; 
 
ChangeCitation2(); 
 
function ChangeCitation2(){ 
 
    incrementIndex() 
 
    document.getElementById('Citation2').innerHTML = cit[ind]; 
 
    document.getElementById('Author2').innerHTML = author[ind]; 
 
    document.getElementById('Citation1').style.opacity = 0; 
 
    document.getElementById('Author1').style.opacity = 0; 
 
    document.getElementById('Citation2').style.opacity = 1; 
 
    document.getElementById('Author2').style.opacity = 1; 
 
    setTimeout(ChangeCitation1, 2000); 
 
} 
 
function ChangeCitation1(){ 
 
    incrementIndex(); 
 
    document.getElementById('Citation1').innerHTML = cit[ind]; 
 
    document.getElementById('Author1').innerHTML = author[ind]; 
 
    document.getElementById('Citation1').style.opacity = 1; 
 
    document.getElementById('Author1').style.opacity = 1; 
 
    document.getElementById('Citation2').style.opacity = 0; 
 
    document.getElementById('Author2').style.opacity = 0; 
 
    setTimeout(ChangeCitation2, 2000); 
 
} 
 
function incrementIndex(){ 
 
    if(ind < cit.length - 1){ 
 
    ind++; 
 
    }else{ 
 
    ind = 0; 
 
    } 
 
}

#Citation1, #Author1{ 
 
    transition: opacity 1s; 
 
} 
 
#Citation2, #Author2{ 
 
    transition: opacity 1s; 
 
    position:absolute; 
 
    top:0px; 
 
    margin-top:0px 
 
} 
 
#citationContainer, #authorContainer{ 
 
    position:relative; 
 
}

<div id="citationContainer"> 
 
    <p id = "Citation1"></p> 
 
    <p id = "Citation2"></p> 
 
</div> 
 
<div id="authorContainer"> 
 
    <p id = "Author1"></p> 
 
    <p id = "Author2"></p> 
 
</div>

Sie könnten wahrscheinlich die folgenden verwenden, um das psuedo Element ::before oder ::after, zu erweitern und manipulieren, es ist content in der CSS ... aber das ist ein guter Ausgangspunkt für Sie zu graben, in !