打字机效果

这是我参与8月更文挑战的第19天，活动详情查看：8月更文挑战

作者：battleKing
仓库：Github、CodePen
博客：CSDN、掘金
反馈邮箱：myh19970701@foxmail.com
特别声明：原创不易，未经授权不得转载或抄袭，如需转载可联系笔者授权

背景

打字机效果：是指自动模拟键盘打字的效果，让文字一个接着一个的显示出来，再自动模拟键盘通过 delete键 把文字一个接着一个删除的一个动画效果。这种动画效果，一般位于 首页主要内容的顶部用于 展示关键的文字信息 给用户。但因为无法固定信息，用户错过了又要等下个循环；企业有更好的替代方案用于展示文字等原因，这种打字机效果未被企业广泛使用，现在更多的是被用在 个人页 和 博客 。

打字机效果优点

1. 兼容性好
2. 模拟打字效果，搭配闪烁的光标效果，更容易吸引用户注意力在这块区域的内容
3. 就像是在与人对话，拉近与用户的距离

打字机效果缺点

1. 未被企业广泛适用
2. 适用场景较少

最终效果

一、添加 HTML 文件

1. 最外层添加 <main> 用于存放主体内容
2. <main> 里面存放一个 <h1> 作为存放全部文字的容器
3. <h1> 里面存放两个 <span>
4. 一个 ID 名为 typeText 的 <span> 用于存放打字机打出来的文字
5. 一个 class 名为 mark 的 <span> 用于存放闪烁的光标

<main>
<h1>
    <span id="typeText" data-text='["你好", "欢迎来到一个前端的内心世界", "期待与你共同成长"]'></span>
    <span class="mark"></span>
</h1>
</main>

二、添加 CSS 文件

先初始化页面

1. 设置 * 为 box-sizing: border-box
2. 设置 main 来使整个项目居中

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

main {
    background: rgb(67, 66, 73);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

主要的 CSS 代码

h1 {
    color: #f1f2f6;
    font-size: 5em;
    font-weight: 300;
}

span.mark {
    border-right: 2px solid white;
    animation: blink 0.6s step-end infinite;
}

@keyframes blink {

    from,
    to {
        border-color: transparent;
    }

    50% {
        border-color: white;
    }
}

三、添加 JS 文件

主要逻辑

// 获取显示文字的span元素
const typeText = document.querySelector("#typeText");
// 获取并解析要展示的文本数组
const texts = JSON.parse(typeText.getAttribute("data-text"));

// 当前显示文本数组中的第几个
let index = 0;
// 当前显示第几个字
let charIndex = 0;
// 每个字显示间隔默认是500毫秒
let delta = 500;

// 记录动画执行开始时间
let start = null;
// 是否为删除动画
let isDeleting = false;

// 动画回调函数
function type(time) {
    window.requestAnimationFrame(type);
    // 初始化开始时间
    if (!start) start = time;
    // 获取时间间隔
    let progress = time - start;
    // 每隔一定的时间，打印出一个新的字符
    if (progress > delta) {
        // 获取完整的字符
        let text = texts[index];
        // 如果是打字效果
        if (!isDeleting) {
            // 给展示文字的span新增一个字符，使用innerHTML来替换，charIndex自增1，然后返回新的字符串子串
            typeText.innerHTML = text.slice(0, ++charIndex);
            // 每个字符打印出来的速度不一样，模仿人工打字的速度
            delta = 500 - Math.random() * 400;
        } else {
            // 如果是删除效果，则把文字一个一个减掉
            typeText.innerHTML = text.slice(0, charIndex--);
        }
        // 把star更新为当前时间，进行下一个周期
        start = time;

        // 如果文字已经全部打印完毕
        if (charIndex === text.length) {
            // 下次开始删除文字
            isDeleting = true;
            // 删除文字的间隔为200毫秒
            delta = 200;
            // 额外等待1.2秒后再删除
            start = time + 1200;
        }

        // 如果文字删除完毕
        if (charIndex < 0) {
            isDeleting = false;
            // 额外增加200毫秒延迟
            start = time + 200;
            // 把index移动到下一个文本，并且在文本数组元素个数中循环
            index = ++index % texts.length;
        }
    }
}

window.requestAnimationFrame(type);

❤️ 感谢大家

如果本文对你有帮助，就点个赞支持下吧，你的「赞」是我创作的动力。

如果你喜欢这篇文章的话，可以「点赞」 + 「收藏」 + 「转发」 给更多朋友。