animatext.js文檔
animatext是一款簡單的jquery文字動畫特效插件。通過該jquery文字動畫插件,你可以在顯示一串文字時,添加多種炫酷的動畫效果。
使用方法
在頁面中引入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
示例地址:http://www.oscarlijo.com/animatext/