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>
好了,这样基本就学会了如何使用这个插件了,接下来你可以将它应用到各种场景,各种自定义。
如果你还是不会,可以下载我的源码。
下面看看大神的例子: