累计撰写 38 篇文章
累计添加 13 个标签
累计收到 223 条评论

打字动画效果typed.js库web小组件

2025年03月01日 67阅读 3评论 1点赞

首页
/
默认分类
/
正文

如何使用 Typed.js 库来实现打字动画效果。
Typed.js 是一个轻量级的 JavaScript 库，可以在网页上创建打字动画

效果

打字机效果演示

废话不多说，代码如下.
引入 Typed.js及显示文本
首先，我们需要在 HTML 文件中引入 Typed.js 库。可以通过 CDN 的方式引入.
id为 element 使用 <span id="element"></span> 则是显示文字

html

<script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>
  <span id="element"></span>

初始化Typed.js

引入库和创建HTML结构后，我们可以通过JavaScript来初始化Typed.js，并设置相关参数。以下示例代码可直接使用:

<script>
  var typed = new Typed("#element", {
    strings: [
      "这些是默认值...",
      "你知道你应该做什么吗？",
      "使用你自己的！",
      "祝你有美好的一天！",
    ],
    typeSpeed: 50,
    startDelay: 1000,
    backSpeed: 25,
    smartBackspace: true,
    shuffle: false,
    backDelay: 700,
    fadeOut: false,
    fadeOutClass: "typed-fade-out",
    fadeOutDelay: 500,
    loop: true,
    loopCount: Infinity,
    showCursor: true,
    cursorChar: "|",
    autoInsertCss: true,
    attr: null,
    bindInputFocusEvents: false,
    contentType: "html",
    onBegin: self => {},
    onComplete: self => {},
    preStringTyped: (arrayPos, self) => {},
    onStringTyped: (arrayPos, self) => {},
    onLastStringBackspaced: self => {},
    onTypingPaused: (arrayPos, self) => {},
    onTypingResumed: (arrayPos, self) => {},
    onReset: self => {},
    onStop: (arrayPos, self) => {},
    onStart: (arrayPos, self) => {},
    onDestroy: self => {},
  });
</script>

参数说明

strings: 要输入的字符串数组。
typeSpeed: 输入速度（毫秒）。
startDelay: 开始输入前的延迟时间（毫秒）。
backSpeed: 删除速度（毫秒）。
smartBackspace: 仅删除与前一个字符串不匹配的部分。
shuffle: 随机打乱字符串。
backDelay: 删除前的延迟时间（毫秒）。
fadeOut: 淡出而不是删除。
fadeOutClass: 淡出动画的 CSS 类。
fadeOutDelay: 淡出延迟时间（毫秒）。
loop: 循环字符串。
loopCount: 循环次数。
showCursor: 显示光标。
cursorChar: 光标字符。
autoInsertCss: 自动插入光标和淡出效果的 CSS 到 HTML <head>。
attr: 输入属性，例如：输入占位符、值或仅 HTML 文本。
bindInputFocusEvents: 绑定焦点和失焦事件（如果元素是文本输入）。
contentType: ‘html’ 或 ‘null’ 表示纯文本。
onBegin: 在开始输入之前的回调函数。
onComplete: 所有输入完成后的回调函数。
preStringTyped: 在每个字符串输入之前的回调函数。
onStringTyped: 在每个字符串输入之后的回调函数。
onLastStringBackspaced: 在循环期间，最后一个字符串输入之后的回调函数。
onTypingPaused: 输入已停止的回调函数。
onTypingResumed: 输入在停止后重新开始的回调函数。
onReset: 重置后的回调函数。
onStop: 停止后的回调函数。
onStart: 开始后的回调函数。
onDestroy: 销毁后的回调函数。

打字机效果里添加随机一言

HTML(带有接口)

<!-- Load library from the CDN -->
<script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>
<!--显示-->
<span id="element"></span>
<script>
    let typed;
    let currentStrings = [`☘️LGZ海云博客YYDS`, `_北海彡制作☘️`];

    function fetchRandomYiyan() {
        return fetch('https://cn.apihz.cn/api/yiyan/api.php?id=88888888&key=88888888')
            .then(response => response.json())
            .then(data => data.msg);
    }

    function startTyped(strings) {
        if (typed) {
            typed.destroy();
        }
        typed = new Typed('#element', {
            strings: strings,
            typeSpeed: 30, // 打字速度
            startDelay: 1000, // 开始延迟
            backSpeed: 15, // 退格速度
            smartBackspace: true,
            shuffle: false,
            backDelay: 800, // 退格延迟
            fadeOut: false, // 不使用淡出效果
            loop: true, // 循环
            loopCount: Infinity, // 无限循环
            showCursor: true,
            cursorChar: "|",
            autoInsertCss: true,
            attr: null,
            bindInputFocusEvents: false,
            contentType: "html",
            onBegin: self => ,
            onComplete: self => {
                // 当一个完整周期完成后，更新随机一言以备下一个周期
                fetchRandomYiyan().then(newYiyan => {
                    currentStrings[currentStrings.length - 1] = `随机一言:${newYiyan}`;
                    startTyped(currentStrings);
                });
            },
            preStringTyped: (arrayPos, self) => ,
            onStringTyped: (arrayPos, self) => ,
            onLastStringBackspaced: self => ,
            onTypingPaused: (arrayPos, self) => ,
            onTypingResumed: (arrayPos, self) => ,
            onReset: self => ,
            onStop: (arrayPos, self) => ,
            onStart: (arrayPos, self) => ,
            onDestroy: self => 
        });
    }

    // 初始化设置
    fetchRandomYiyan().then(initialYiyan => {
        currentStrings.push(`随机一言:${initialYiyan}`);
        startTyped(currentStrings);
    }).catch(error => console.error('Error fetching random yiyan:', error));
</script>

在 Vue 中使用 Typed.js

在 Vue 项目中使用 Typed.js 也非常简单。我们可以通过在组件的 mounted 生命周期钩子中初始化 Typed.js。以下是一个示例：

npm install typed.js

<template>
  <div>
    <span id="typed-element"></span>
  </div>
</template>

<script>
  import Typed from "typed.js";

  export default {
    name: "TypedComponent",
    mounted() {
      const options = {
        strings: [
          "这些是默认值...",
          "你知道你应该做什么吗？",
          "使用你自己的！",
          "祝你有美好的一天！",
        ],
        typeSpeed: 50,
        startDelay: 1000,
        backSpeed: 25,
        smartBackspace: true,
        shuffle: false,
        backDelay: 700,
        fadeOut: false,
        fadeOutClass: "typed-fade-out",
        fadeOutDelay: 500,
        loop: true,
        loopCount: Infinity,
        showCursor: true,
        cursorChar: "|",
        autoInsertCss: true,
        attr: null,
        bindInputFocusEvents: false,
        contentType: "html",
        onBegin: self => {},
        onComplete: self => {},
        preStringTyped: (arrayPos, self) => {},
        onStringTyped: (arrayPos, self) => {},
        onLastStringBackspaced: self => {},
        onTypingPaused: (arrayPos, self) => {},
        onTypingResumed: (arrayPos, self) => {},
        onReset: self => {},
        onStop: (arrayPos, self) => {},
        onStart: (arrayPos, self) => {},
        onDestroy: self => {},
      };

      new Typed("#typed-element", options);
    },
  };
</script>

<style scoped>
  /* 添加一些样式以便更好地展示打字动画 */
  #typed-element {
    font-size: 24px;
    color: #333;
  }
</style>

结论
通过以上步骤，我们可以轻松地在网页上实现打字动画效果。Typed.js 提供了丰富的配置选项，可以满足各种不同的需求。

1赞

打赏

发布作者： _北海彡

百度收录：正在检测是否收录...

最后更新： 2025年 03月 01日 21:03

本文链接： https://lgnb.asia/index.php/archives/128/

作品采用：《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 》许可协议授权

—— 评论区 ——

uxauvopuwx
Windows 10 x64 Edition 搜狗高速浏览器

2025年03月01日 05:45 回复

作者的才华横溢，让这篇文章成为了一篇不可多得的艺术品。
2244480877
Windows 10 x64 Edition Google Chrome 116

2025年03月01日 21:01 回复

好感谢分享！
bdufmnavrw
Windows 10 x64 Edition 搜狗高速浏览器

2025年03月02日 12:17 回复

网络流行语融入自然，贴近年轻读者。