Question

我一直在寻找如何使用html / css / js / jquery：https://www.nobledesktop.com/certificates/web-design在本网站上完成动画。特别是，我想知道如何实现突出显示然后删除动画的效果，但我也想知道如何延迟一次插入一个字符的下一个字。之前已经问过这个问题，但没有达到我上面提到的最后一个规范。

这是我所指的主题：Web animation css highlight

这是我在http://www.nobledesktop.com/certificates/web-design上讨论的动画图片。

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

我已经查看了与该范围相关的源代码，但我不知道从上述线程中回答如何突出显示文本的位置。任何帮助，将不胜感激。谢谢！

Answer 1

我知道它有点晚了，jquery.typer.js库可能是Marcos解释的最佳解决方案，但我现在有时间在我手上，我试图克隆你所指的链接的行为使用jQuery和CSS。

这是我的working demo。

我为打字动画和单词遍历创建了递归函数，与高亮动画的CSS过渡相结合：

<强> JS

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 - CSS突出显示动画的速度（以毫秒为单位）

Answer 2

他们使用jquery.typer.js库完成了它。您可以查看该来源，看看它是如何完成的。

但是在你指出的网站上，他们略微修改了这个插件。例如，他们添加了一个名为highlightEverything的选项，以避免仅选择在转换之间更改的文本的默认行为。

如何使用javascript / jquery实现此动画？

2 个答案: