第一步:
当然是下载插件,下载地址(https://github.com/jschr/textillate);
第二步:
当然是引用文件,此插件是基于 jquery的所以你的项目中必须包含 jquery插件(这个简单自己下吧),然后就是把 它的必要文件引入!
<link rel="stylesheet" href="css/animate.css" /> //css文件
<script src="textJs/jquery.fittext.js"></script>
<script src="textJs/jquery.lettering.js"></script>
<script src="textJs/jquery.textillate.js"></script>//(注意这几个文件最好放在最后面引入)
第三步:
用法 html中
<h1 class="tlt" data-in-effect="rollIn">Title</h1>
js中
$('.tlt').textillate();
第四步:配置
$('.tlt').textillate({
// the default selector to use when detecting multiple texts to animate
selector: '.texts',
// enable looping
loop: false,
// sets the minimum display time for each text before it is replaced
minDisplayTime: 2000,
// sets the initial delay before starting the animation
// (note that depending on the in effect you may need to manually apply
// visibility: hidden to the element before running this plugin)
initialDelay: 0,
// set whether or not to automatically start animating
autoStart: true,
// custom set of 'in' effects. This effects whether or not the
// character is shown/hidden before or after an animation
inEffects: [],
// custom set of 'out' effects
outEffects: [ 'hinge' ],
// in animation settings
in: {
// set the effect name
effect: 'fadeInLeftBig',
// set the delay factor applied to each consecutive character
delayScale: 1.5,
// set the delay between each character
delay: 50,
// set to true to animate all the characters at the same time
sync: false,
// randomize the character sequence
// (note that shuffle doesn't make sense with sync = true)
shuffle: false,
// reverse the character sequence
// (note that reverse doesn't make sense with sync = true)
reverse: false,
// callback that executes once the animation has finished
callback: function () {}
},
// out animation settings.
out: {
effect: 'hinge',
delayScale: 1.5,
delay: 50,
sync: false,
shuffle: false,
reverse: false,
callback: function () {}
},
// callback that executes once textillate has finished
callback: function () {}});