最近主题的更新是想让页面更加丰富起来,因为之前为了界面清爽删掉了很多功能,虽然一种程度上算是简约,但是对于个人博客来说不想只包含文章,还应该多一些信仰之力。所以为了高大上的逼格(狗头)所以分析了一下Butterfly主题的打字机效果。

Butterfly用的是typed.js来做的打字机效果。开箱即用,非常好用。

效果预览

见页面底部

页面底部打字机效果

安装教程

这里提供两种代码实现方式,根据业务需求来

Butterfly可以使用pug代码,如下

1
2
3
4
5
6
7
8
9
10
11
12
#footer-banner-tips

script(src='https://cdn.jsdelivr.net/npm/typed.js/lib/typed.min.js')
script.
var typed = new Typed("#footer-banner-tips", {
strings: ["用行动去思考,去改变、去创造。","Take action to think, to change, to create."],
startDelay: 200,
backDelay: 2000,
typeSpeed: 100,
loop: true,
backSpeed: 20
})

其他项目可以使用html代码,如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div id="footer-banner-tips">
<script src="https://cdn.jsdelivr.net/npm/typed.js/lib/typed.min.js"></script>
<script>
var typed = new Typed("#footer-banner-tips", {
strings: ["用行动去思考,去改变、去创造。","Take action to think, to change, to create."],
startDelay: 200,
backDelay: 2000,
typeSpeed: 100,
loop: true,
backSpeed: 20
})
</script>
</div>

项目参数调节

可以参考原项目的参数来调整Typed中的值