如何使用javascript/jquery實現此動畫？

我一直在尋找如何使用html/css/js/jquery完成本網站上的動畫：https://www.nobledesktop.com/certificates/web-design。特別是，我想知道如何實現突出顯示然後刪除動畫的效果，但是我也想知道如何在延遲的情況下一次插入下一個字。這個問題之前已經被問過，但是沒有達到我上面提到的最後一個規範。如何使用javascript/jquery實現此動畫？

這是我指的螺紋：Web animation css highlight

這是我說的對http://www.nobledesktop.com/certificates/web-design動畫的圖像。

http://pasteboard.co/2ywHhxGE.png

我已經看過相關跨度的源代碼，但我不知道從哪裏開始過去突出顯示文本如前面提到的線程回答。任何幫助，將不勝感激。謝謝！

來源

2015-08-08 Milind Lingineni

我知道這有點遲，而且jquery.typer.js庫可能是Marcos解釋的最好的解決方案，但我現在有時間在我的手上，我嘗試從您用jQuery引用的鏈接克隆行爲和CSS。

這是我的working demo。

我創建遞歸函數的打字動畫和文字遍歷，亦隨的亮點動畫CSS轉換：

function typify($elem, wordSec, charSec, highlightSec) { 
    var texts = $elem.data('type').split(','); 
    $elem.css({ 
     transition: 'background-size ' + (highlightSec/1000) + 's' 
    }); 
    addByWord($elem, texts, 0, wordSec, charSec, highlightSec); 
} 

function addByWord($elem, texts, i, wordSec, charSec, highlightSec) { 
    if (i < texts.length) { 
     var text = texts[i], 
      duration = (text.length * charSec); 

     $elem.text('') 
      .addClass('reset') 
      .removeClass('highlight'); 
     addByLetter($elem, texts[i], 0, charSec); 
     setTimeout(function() { 
      $elem.removeClass('reset') 
       .addClass('highlight'); 
     }, duration + wordSec); 
     setTimeout(function() { 
      addByWord($elem, texts, ++i, wordSec, charSec, highlightSec); 
     }, duration + highlightSec + 300 + wordSec); 
    } else { 
     addByWord($elem, texts, 0, wordSec, charSec, highlightSec); 
    } 
} 

function addByLetter($elem, txt, i, sec) { 
    if (i < txt.length) { 
     var ch = txt.split('')[i]; 
     $elem.text($elem.text() + ch); 
     setTimeout(function() { 
      addByLetter($elem, txt, ++i, sec); 
     }, sec); 
    } 
} 

typify($('.animation'), 1500, 105, 300);

CSS

.animation { 
    padding-bottom: 5px; 
    border-bottom: 5px solid #00a8e6; 
    box-sizing: content-box; 
    display: inline-block; 
    background: linear-gradient(to left, rgba(0, 20, 255, 0.5) 0%, rgba(0, 20, 255, 0.5) 100%) no-repeat top right; 
    background-size: 0% 100%; 
} 
.animation.highlight { 
    background-size: 100% 100%; 
} 
.animation.reset { 
    background: transparent; 
    background-size: 0% 100%; 
}

函數參數的定義，typify($elem, wordSec, charSec, highlightSec)下面：

$ elem - 你想要的目標jQuery元素（應該有數據類型與值由字符串分隔。
wordSec - 在屏幕上以毫秒爲單位被示出的每個字的持續時間，正在鍵入之後和被突出顯示之前
charSec - 每個信毫秒打字動畫的速度
highlightSec - 以毫秒爲單位

來源

2015-08-08 07:11:55 KiiroSora09

他們通過使用jquery.typer.js庫來實現它。你可以看看這個來源，看看它是如何完成的。

但是在您指出的網站中，他們已經稍微修改了插件。例如，他們添加了一個名爲highlightEverything的選項，以避免僅選擇在轉換之間更改的文本的默認行爲。

來源

2015-08-08 04:41:51

如何使用javascript/jquery實現此動畫？

回答

相關問題