jQuery的/ JavaScript的文字動畫

Question

好，我已經看到了幾個網站的一些文字動畫，並一直未能反正找到實現這一點上我的網站..如果你去這裏 https://www.battlefield.com/

然而文本動畫不確定文本正在使用什麼。我怎麼能動畫文字簡單的淡入淡出過渡像上面的網站。

例如

線1個招呼 線2歡迎 3號線到我們的社區

等

Answer 1

他們做了什麼，奇怪的是，我不知道爲什麼他們做了這樣的說法。

看一看那個網址：

https://media-www-battlefieldwebcore.spark.ea.com/content/dam/ea/battlefield-portal/sequence/BF1_Animated_Logo_94.png

這只是〜110倍全尺寸的圖像（只是更改文件名的序列號），它們加載到頁面，然後一個...播放手動。這意味着，他們通過javascript每秒更新圖像源〜15-20次。這解釋了開始時閃爍的圖像，當圖像第一次被加載時......也許他們甚至喜歡這種效果。

所以它不是一個動畫PNG，它沒有多媒體內容，它只是大約100幀，手動分配給圖像。

您可能需要檢查頁面，搜索標籤爲<bf-animated-sequence>的元素。它包含一些子元素，其中一個是每秒更換幾次src的圖像。

和 - 請 - 不要效仿他們的榜樣，爲了您的觀衆。有很多更好的方法來做到這一點（畫布，視頻播放，不管）。

對於文字的動畫，我建議你閱讀了jQuery動畫API：http://api.jquery.com/animate/

[編輯] 使用jQuery你可以做這樣的事情：

$(function(){ 
 

 
     var $texts = $("#textfield .text"); 
 
     
 
     var textIndex = 0; 
 

 
     function nextLine(){ 
 

 
     //Step 1: Fade in text 
 
     $($texts[textIndex]).animate({opacity:1,"margin-top":12}, 500, "linear", function(){ 
 
     
 
      //Step 2: Fade out text 
 
      setTimeout(function(){   
 
       $($texts[textIndex]).animate({opacity:0,"margin-top":20}, 500, "linear", function(){ 
 
        //Step 3: Reset current and call next text 
 
        $($texts[textIndex]).css({"margin-top":20}); 
 
        textIndex++; 
 
        textIndex %= $texts.length; 
 
        nextLine(); 
 
        
 
       }); 
 
      }, 3000); 
 
     }); 
 
     
 
     } 
 
     
 
     nextLine(); 
 
     
 

 

 
    });

#textfield{ 
 
     border:1px solid black; 
 
     height:40px; 
 
     position:absolute; 
 
     left:10px; 
 
     right:10px; 
 
     top:20px; 
 
     overflow:hidden; 
 
    } 
 

 
    #textfield .text{ 
 
     position:absolute; 
 
     text-align:center; 
 
     width:100%; 
 
     margin-top:20px; 
 
     font-family:Arial; 
 
     opacity:0; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <div id="textfield"> 
 
     <div class="text">Hello</div> 
 
     <div class="text">Welcome to</div> 
 
     <div class="text">our site</div> 
 
    </div>

Answer 2

你將不得不使用這些設置，但我相信這可能會讓您更接近正確的方向。

https://tympanus.net/codrops/2012/04/17/rotating-words-with-css-animations

Answer 3

您可以用CSS3 keyframes動畫實現這一點（我強烈建議你考慮走這條路，這將是多輕資源消耗明智）：

* { 
 
    padding: 0; 
 
    margin: 0; 
 
    box-sizing: boder-box; 
 
} 
 

 
.animateText div { 
 
    position: absolute; 
 
    box-sizing: border-box; 
 
    width: 100%; 
 
    top: 30px; 
 
    font-size: 24px; 
 
    text-align: center; 
 
    animation: blurFadeInOut 2s ease-in backwards; 
 
} 
 

 
.animateText div.line-1 { 
 
    animation-delay: 0s; 
 
    opacity: 0; 
 
} 
 

 
.animateText div.line-2 { 
 
    animation-delay: 2s; 
 
    opacity: 0; 
 
} 
 

 
.animateText div.line-3 { 
 
    animation-delay: 4s; 
 
    opacity: 0; 
 
} 
 

 
@keyframes blurFadeInOut { 
 
    0% { 
 
    opacity: 0; 
 
    top: 30px; 
 
    } 
 
    20%, 
 
    75% { 
 
    opacity: 1; 
 
    top: 20px; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    top: 10px; 
 
    } 
 
}

<div class="animateText"> 
 
    <div class="line-1">Hello</div> 
 
    <div class="line-2">Welcome</div> 
 
    <div class="line-3">To our community</div> 
 
</div>