animatext是一款简单的jquery文字动画特效插件。通过该jquery文字动画插件,你可以在显示一串文字时,添加多种炫酷的动画效果。
安装
可以通过npm或bower来安装animatext jquery文字动画插件。
npm install animatext bower install animatext
使用方法
在页面中引入jquery和animatext.min.js文件,如果需要额外的动画效果,可以添加animate.min.css动画库。
<link rel="stylesheet" href="css/animate.min.css" type="text/css" /> <script src="path/to/jquery.min.js"></script> <script src="path/to/animatext.min.js"></script>
HTML结构
你可以为任意标题文字,段落文字添加文字动画特效。例如:
<h3 class="demo">青春,人生当中最美好的时光,不知不觉就会逝去,正因如此,我们才更加感怀青春。</h3>
初始化插件
在页面DOM元素加载完毕之后,可以通过animatext()
方法来初始化该jquery文字动画特效插件。
$(".demo").animatext();
配置参数
文字的显示分为单词和字母两种模式:
// 字母模式 $(".demo").animatext({ mode: "chars" }); // 单词模式 $(".demo").animatext({ mode: "words" });
可以通过reverse
参数设置反向显示。
$(".demo").animatext({ reverse: true });
可以通过infinite
参数设置无限循环显示。
$(".demo").animatext({ infinite: true });
可以通过speed
参数设置文字动画的速度。
$(".demo").animatext({ speed: 150 });
你还可以通过group
参数来对文字进行分组。
$(".demo").animatext({ group: true });
可以通过random
参数来设置随机显示文字。
$(".demo").animatext({ random: true });
initDelay
参数用于设置显示文字的延迟时间。
$(".demo").animatext({ initDelay: 0 });
timeToRelaunch
参数用于设置两次循环文字动画之间的延迟时间。
$(".demo").animatext({ timeToRelaunch: 2000 });
最后,还有两个可用的回调函数。
$(".demo").animatext({ onBegin: function() {}, onSuccess: function() {} });
animatext jquery文字动画特效插件的github地址为:https://github.com/oscarlijo/animatext
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!