如何使用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实现此动画？

回答

相关问题