如何使用JS動畫文本循環

我有一個文字循環功能，我想在網站上使用。如何使用JS動畫文本循環

它的工作原理如下列出的方法：

HTML &的Javascript

<h1 class="intro-title">This is some text 
    <span id="changer">This text changes</span> 
</h1> 

<script> 
var words = ["changes to this", "changes to that", "changes to there"]; 
var i = 0; 
var text = "This text changes"; 

function _getChangedText() { 
    i = (i + 1) % words.length; 
    return text.replace(/This text changes/, words[i]); 
} 

function _changeText() { 
    var txt = _getChangedText(); 
    document.getElementById("changer").innerHTML = txt; 
} 
setInterval("_changeText()", 1800); 
</script>

這工作得很好，並通過精細中的選項。我想爲這個腳本設置動畫，所以文本向上旋轉並淡入下一個文本選項。有什麼我可以添加到這個腳本，還是需要重新編寫？

任何幫助表示讚賞。

有一個的jsfiddle附：https://jsfiddle.net/g59phn0b/

來源

2015-06-26 Ben

爲動畫創建CSS fadeOut類，並在_changeText()添加。然後在動畫之後刪除此類。如果需要，爲下一個元素添加fadeIn類。使用setTimeout();與您的CSS時間旋轉。

CSS

.fadeOut{ 
    visibility: hidden; 
    opacity: 0; 
-webkit-transition: all 1s ease-out; 
     -moz-transition: all 1s ease-out; 
     -ms-transition: all 1s ease-out; 
     -o-transition: all 1s ease-out; 
      transition: all 1s ease-out; 
    transform: translate(0,-50px); 
    -webkit-transform: translate(0,-50px); 
    -o-transform: translate(0,-50px); 
    -moz-transform: translate(0,-50px); 
}

function _changeText() { 
    var txt = _getChangedText(); 
    var d = document.getElementById("changer") 
    d.className = "fadeOut"; 
    setTimeout(function(){ 
     d.className = ""; 
     d.innerHTML = txt; 
    }, 1000); 
}

這裏的編輯JSFiddle與fadeOut。只要對fadeIn做同樣的處理，你就能得到理想的效果。

來源

2015-06-26 15:01:40

非常感謝！ – Ben

它是如何工作的？我得到一個錯誤，我需要改變

setInterval("_changeText()", 1800);

到

setInterval(_changeText, 1800);

得到它的工作

不需要模式匹配，或者您的文本變量，你可以簡單地返回的話[i]

function _getChangedText() { 
    i = (i + 1) % words.length; 
    return words[i]; 
}

您可以使用CSS將旋轉添加到Hosch Nok的解決方案，或者追求一個畫布操作灰。

.fadeOut{ 
    visibility: hidden; 
    opacity: 0; 
    transition: visibility 0s 1s, opacity 1s linear; 
    -webkit-animation:spin 4s linear infinite; 
    -moz-animation:spin 4s linear infinite; 
    animation:spin 4s linear infinite; 
} 

@-moz-keyframes spin { 100% { -moz-transform: rotate(-360deg); } } 
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(-360deg); } } 
@keyframes spin { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }

來源

2015-06-26 15:19:57

如何使用JS動畫文本循環

回答

相關問題