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

  • 2017-05-05
  • 8,221
  • 3

文章作者:小朱朱

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>

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

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

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

 

下面看看大神的例子:

下载此源码 | 大小45kb