侧边栏壁纸

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

2025年03月01日 66阅读 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
打赏

—— 评论区 ——

昵称
邮箱
网址
取消
  1. 头像
    uxauvopuwx
    Windows 10 x64 Edition   搜狗高速浏览器
    回复

    作者的才华横溢,让这篇文章成为了一篇不可多得的艺术品。

  2. 头像
    2244480877
    Windows 10 x64 Edition   Google Chrome 116
    回复

    好 感谢分享!

  3. 头像
    bdufmnavrw
    Windows 10 x64 Edition   搜狗高速浏览器
    回复

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

人生倒计时
舔狗日记

海云博客公告

海云博客、云服务、API、霹雳霹雳、百宝箱、LGZ、影视、卡密网等由于特殊原因将于2025年3月-6月末暂时停更停维护



博客先这样吧,在搞子比很快就好了
欢迎!
一天只弹一次
朕已阅

Warning: Invalid argument supplied for foreach() in /www/wwwroot/mnbt.20739403/usr/plugins/Clogin/Plugin.php on line 158