打造流畅动态文字展示——typed.js

YBXP • 2024-10-04 00:15 • 编程

一、typed.js是什么？

Typed.js 是一个轻量级的、易于使用的JavaScript库，它可以让你为自己的网页和应用程序增加流畅且自然的动态文字展示效果。既可以自动执行，也可以由用户触发，是在使文本内容更加生动的过程中的一种很好的解决方案。

二、typed.js的安装与使用

1、直接通过下载安装，或通过声明script标签和CDN链接来使用typed.js。代码如下：

<script src="path/to/your/typed.js"></script>

//或

<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script>

2、在需要添加动态效果的元素中用Span标签将文字包起来，并指定data-typed属性值为该段文字。代码如下：

<span class="typed-text" data-typed="Awesome text"></span>

3、调用typed.js并进行必要配置，代码如下：

<script>
var options = {
    strings: ['Some awesome text', 'Some other awesome text'],
    loop: true,
    typeSpeed: 50
}

var typed = new Typed('.typed-text', options);
</script>

三、typed.js的一些基本功能介绍

1、速度

typed.js的typeSpeed参数可以控制文字的打印速度，单位是毫秒。还可以设置backSpeed，即文字删除速度。替换的文字可以使用deleteSpeed控制删除速度。

2、循环打印

设置loop为true，则typed.js将持续循环打印。与此相应的，还可以设置并控制开始、结束的延迟时间loopDelay、loopCount。

3、光标形状、速度

满足用户个性化需求，typed.js还支持自定义光标形状和打印速度。可以在options中指定相关参数。

4、回调函数

typed.js还支持回调函数，如完成函数onComplete，在所有文字打印完成后执行，也可以执行所有回调函数，包括完成、删除等。

四、typed.js案例分析

1、typed.js实现动态树状结构

将树结构数据作为一个二维数组传给typed.js，利用setTimeout、callbacks和递归等编程技巧，从而实现动态展示树状结构。代码如下：

var data = [
    ['A', 'B', 'C'],
    ['D', 'E'],
    ['F', 'G', 'H', 'I'],
    ['J', 'K']
]

var typed = new Typed('.tree-text', {
    strings: data,
    typeSpeed: 100,
    onComplete: function(){
        setTimeout(function(){
            typed.reset();
        }, 10000)
    }
})

2、typed.js实现打字机效果

网页中有一个典型的动态文字展示场景就是打字机效果。利用typed.js，我们可以使这个效果更加生动且自然。代码如下：

var typed = new Typed('.typewriter-text', {
    strings: ['Hello, World!', 'It\'s a beautiful day today.'],
    typeSpeed: 100,
    backSpeed: 50,
    loop: true
})

3、typed.js实现背景文字轮播

将背景图作为一个满屏div的background，利用typed.js设置该background中的文字展示效果，实现背景文字轮播效果。代码如下：

.typed-background{
    height: 100vh;
    width: 100vw;
    background: url(./background.jpg);
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #fff;
}

var typed = new Typed('.typed-background', {
    strings: ['Beautiful background', 'Amazing scenery'],
    typeSpeed: 100,
    backSpeed: 50,
    loop: true
})

五、总结

Typed.js是一个方便易用的JavaScript库，可以让网页和应用程序的文字内容更加生动自然，增加用户的体验。通过学习和实践typed.js能够帮助我们更好的开发和实现动态文字展示效果。

原创文章，作者：YBXP，如若转载，请注明出处：https://www.506064.com/n/136053.html