ityped.js | 模拟打字机输入的效果插件(详细使用教程+demo)
文章作者:小朱朱
ityped.js是一款模拟人在打字时的效果，这个插件通常会被使用在各种官网的banner。ityped.js的体积非常小，只有2kb，下面先看运行效果。有了这款插件，发挥你的想象，可以做到各种炫酷效果呢。
使用方法：
1、需要先下载ityped.min.js然后在网页的<head>标签里引入。
推荐使用本站免费cdn链接，代码如下：
<script src="http://code.lslbk.cn/src/ityped/ityped.min.js"></script>
2、在body里写下自己想要的文字
<body> 绿水灵博客 <br> <span class="ityped"></span> </body>
这里的<span>标签到时候是用来动态显示打字文字用的，class里的名字随便取，到时候会需要获取到这个class元素。
3、接下来我们开始初始化插件特效，这段代码要加到body标签后面，否则获取不到<span>的dom对象，就没有效果了，所以要放到body标签后面即可。
<script>
window.ityped.init(document.querySelector('.ityped'), {
strings : ['致力于免费项目源码和详细教程',
'欢迎各位高手加入本博客,分享自己的精彩',
'做一个清爽简洁的博客网'],
//可以写无限条句子，只要用逗号隔开
typeSpeed: 155, //打字的速度
backSpeed: 60, //删除字的速度
startDelay: 500, //每一句开始打字停顿的时间
backDelay: 2500, //每一句删除字的停顿时间
loop: true, //是否循环动画
showCursor: true, //是否显示光标
cursorChar: "︳", //设置光标字符
});
</script>
4、做到这一步基本就大功告成了，但是还有一个问题，我们的动画是可以动了，但是我们还需要光标可以闪烁，代码如下：
为光标添加css闪烁动画：
<style>
.ityped-cursor{
opacity: 1;
-webkit-animation: blink 0.8s infinite;
-moz-animation: blink 0.8s infinite;
animation: blink 0.8s infinite;
}
@keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
</style>
好了，这样基本就学会了如何使用这个插件了，接下来你可以将它应用到各种场景，各种自定义。
如果你还是不会，可以下载我的源码。
下面看看大神的例子：