t-writer.js 使用教程-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00962/article/details/141849347

t-writer.js 使用教程

t-writer.jsNative typewriter effect, without compromises or dependencies.项目地址:https://gitcode.com/gh_mirrors/tw/t-writer.js

项目介绍

t-writer.js 是一个用于模拟打字效果的 JavaScript 库。它允许开发者轻松地在网页上实现文本逐字显示的效果，常用于博客、演示文稿、教程等场景，以吸引用户的注意力并增强互动性。

项目快速启动

安装

你可以通过 npm 或直接引入 CDN 链接来安装 t-writer.js。

使用 npm 安装

npm install t-writer.js

使用 CDN

<script src="https://cdn.jsdelivr.net/npm/t-writer.js/dist/t-writer.min.js"></script>

基本使用

以下是一个简单的示例，展示如何在网页上使用 t-writer.js 实现打字效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>t-writer.js 示例</title>
</head>
<body>
    <div id="typed-strings">
        <p>欢迎使用 t-writer.js！</p>
        <p>这是一个打字效果的示例。</p>
    </div>
    <span id="typed"></span>

    <script src="https://cdn.jsdelivr.net/npm/t-writer.js/dist/t-writer.min.js"></script>
    <script>
        const target = document.getElementById('typed');
        const writer = new Typewriter(target, {
            loop: true,
            typeSpeed: 80,
            deleteSpeed: 50,
            typeColor: 'blue'
        });

        writer
            .type('欢迎使用 t-writer.js！')
            .rest(500)
            .changeOps({ typeSpeed: 60 })
            .type('这是一个打字效果的示例。')
            .rest(1000)
            .clear()
            .start();
    </script>
</body>
</html>