首页计算机科学技术分享Hexo源码分享Hexo美化

    ✨ 我是流萤白沙的「文章捕手」，擅长在文字的星海中打捞精华。每当新的篇章诞生，我就会像整理贝壳一样，将思想的闪光点串成珍珠项链~

    本文介绍了如何在博客中使用 Typed.js 实现打字机效果。首先，作者通过搜索发现现有教程多为修改主题自带效果，遂决定自行实现。文章详细列出了使用方法，包括引入 Typed.js 脚本、准备 HTML 结构以及初始化代码。提供了完整的代码示例，并解释了可配置参数，如输入速度、删除速度、循环次数等，便于用户根据需求进行调整。通过这些步骤，用户可以轻松在网页上添加打字机效果，增强视觉吸引力。

    最近逛博客时看上了 Fluid 主题的打字机效果，于是一通搜索发现基本都是修改主题自带打字机效果的，没有我想要的怎么引入的教程，于是去看了看 typed.js 的使用方法，自己动手实现了效果。

    # 效果预览

    • 见首页

    image-20250306221603705

    # 使用方法

    1. 引入 Typed.js
    <script src="https://s4.zstatic.net/ajax/libs/typed.js/2.1.0/typed.umd.js"></script>
    1. 准备 Html 结构，可以是新创建的，也可以是你网页上已经存在的。尽量使用 span 否则光标会出现在下一行
    <span id="typer"></span>
    1. 初始化
    <script>
      var typed = new Typed("#typer", {
        strings: [
          "流萤白沙のBlog",
          "学习-记录-分享",
          "Learn - Record - Share",
        ],
        typeSpeed: 50, // 输入速度，越小越快
        startDelay: 1000, // 开始前延迟
        backSpeed: 25, // 删除速度，越小越快
        backDelay: 700, // 删除前延迟
        loop: true //// 是否循环
      });
    </script>

    # 完整代码示例

    <script src="https://s4.zstatic.net/ajax/libs/typed.js/2.1.0/typed.umd.js"></script>
    <span id="typer"></span>
    <script>
      var typed = new Typed("#typer", {
        strings: [
          "流萤白沙のBlog",
          "学习-记录-分享",
          "Learn - Record - Share",
        ],
        typeSpeed: 50, // 输入速度，越小越快
        startDelay: 1000, // 开始前延迟
        backSpeed: 25, // 删除速度，越小越快
        backDelay: 700, // 删除前延迟
        loop: true, // 是否循环
        showCursor: true,
        cursorChar: "|"
      });
    </script>
    <style>
      .typer{
        font-size: 2.5em;
      }
      .typed-cursor {
        font-size: 2.5em;
      }
    </style>

    # 可配置参数

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