当前位置：首页 > article >正文

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

article 2024/11/19 5:58:17

前言

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

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>