Typed.js打字效果js库的几种应用方式(1)

fox/ 2023年03月31日/ 开源推荐/ 浏览 942

之前我们分享过一个有趣而简单的动态打印字体插件——typed.js

关于typed.js,可以了解这篇文章

一个有趣而简单的动态打印字体插件——typed.js

这里我们会陆续给给大家说一下,Typed.js的几种实际应用方法,多掌握一些简单的前端技巧

1.基础应用,在静态HTML中使用(对 SEO 友好)

您可以在页面上放置一个html的div并从中读取,而不是使用strings数组插入字符串。这允许搜索引擎的爬虫和禁用 JavaScript 的用户在页面上看到您的文本。

例如:

<script>
  var typed = new Typed('#typed', {
    stringsElement: '#typed-strings'
    typeSpeed: 0,
    backSpeed: 0,
    backDelay: 500,
    startDelay: 1000,
    loop: false,
  });
</script>

其中参数如下,我可以通过调整各参数,差异打字效果:

typeSpeed: 输入字符速度,

backSpeed: 删除字符速度,

backDelay: 输入延迟,

startDelay: 开始延迟,

loop: 是否循环,


HTML代码如下

<div id="typed-strings">
  <p>Typed.js is a <strong>JavaScript</strong> library.</p>
  <p>It <em>types</em> out sentences.</p>
</div>
<span id="typed"></span>


发表评论

暂无评论,抢个沙发...

客服 工单