如何用 Typed.js 制作炫酷的打字效果？

前言

在前端开发的世界中，动态和交互性是用户体验的关键。

Typed.js 是一个轻量级的 JavaScript 库，它能够以编程方式模拟打字效果，为网页增添动态的文本展示。

这篇文章将带你深入了解 Typed.js 的魔力，探索它如何为前端开发带来新的活力。

github：https://github.com/mattboldt/typed.js/

官网：https://mattboldt.com/demos/typed-js/

介绍

Typed.js 是一个简单易用的库，它允许开发者在网页上实现打字机效果。

通过简单的配置，你可以让文本以设定的速度逐字显示，然后逐字删除，再开始下一句，如此循环。

这种效果不仅能够吸引用户的注意力，还能以一种新颖的方式展示信息。

特点

轻量级：Typed.js 体积小巧，不会给网页加载带来负担。
高度可定制：支持多种参数设置，如打字速度、删除速度、循环次数等。
易于集成：可以轻松集成到任何 HTML 元素中。
响应式：能够适应不同设备和屏幕尺寸。

使用场景

动态欢迎信息：在网站首页展示动态的欢迎语。
特色功能介绍：动态展示产品或服务的特点。
动态标语：用于营销活动，吸引用户注意。
交互式教程：在教学网站中引导用户学习。

使用案例

在 Vue 项目中，你可以这样使用 Typed.js：

安装 Typed.js：

npm install typed.js

在 Vue 组件中使用：

<template><div id="typing-demo" class="typing-container"><span class="typing-text"></span></div>
</template><script>
import Typed from 'typed.js';export default {name: 'TypingDemo',mounted() {new Typed('.typing-text', {strings: ['你好，这里是我码玄黄', '欢迎来到我的公众号', '我将每日分享好玩的技术内容'],typeSpeed: 50,backSpeed: 25,loop: true,showCursor: true,cursorChar: "|",smartBackspace: true,attr: null,bindings: null,contentType: 'html',onComplete: function(self) {console.log('Typed.js finished typing');},onStringTyped: function(pos, self) {console.log('Typed.js typed:', pos);},onLastStringBackspaced: function(self) {console.log('Typed.js backspace complete');},onStart: function(self) {console.log('Typed.js started');},onDestroy: function(self) {console.log('Typed.js destroyed');}});}
}
</script><style>
.typing-container {font-family: 'Courier New', Courier, monospace;font-size: 24px;color: #333;padding: 10px;background-color: #f4f4f4;border-radius: 8px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);margin: 20px auto;width: 80%;text-align: center;
}.typing-text {font-weight: bold;color: #007BFF;
}.typing-container .typed-cursor {opacity: 1;animation: blink 0.7s infinite;
}@keyframes blink {50% { opacity: 0; }
}
</style>