ityped.js | 模拟打字机输入的效果插件(详细使用教程+demo)

文章作者:小朱朱

ityped.js是一款模拟人在打字时的效果，这个插件通常会被使用在各种官网的banner。ityped.js的体积非常小，只有2kb，下面先看运行效果。有了这款插件，发挥你的想象，可以做到各种炫酷效果呢。
<br />

使用方法：

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>

好了，这样基本就学会了如何使用这个插件了，接下来你可以将它应用到各种场景，各种自定义。

如果你还是不会，可以下载我的源码。

banner打字效果.zip | 大小144kb