html网页设计文字出现动画,制作有吸引力的文字动画效果-textillate.js

另外你可以参考下面详细的设定：

$('.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

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

},

// out animation settings.

out: {

effect: 'hinge',

delayScale: 1.5,

delay: 50,

sync: false,

shuffle: false,

}

});

就这样了，简单吧？需要注意的就是这个使用了CSS3动画，所以某些浏览器是不支持哦！

其它文字特效jQuery插件

Shuffle Letters Effect

Sliding Letters

3D Flying Text

Codename Rainbows

Textualizer

最后最后

好吧，剩下的就交给你了。发挥你的创意和想像力吧！

推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com

交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。

赞助商链接

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。

版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。

SKY -

2016 年 11 月 09 日 下午 1:29

你的例子稍微改一下头部，去掉就可以兼容了

我像曹操西门庆 -

2013 年 03 月 15 日 上午 8:41

只有从左边进入的效果嘛？？？有没有其他的进入效果？？？

我像曹操西门庆 -

2013 年 03 月 15 日 上午 8:40

嗯，的确不错。可惜不会JS，要是只用CSS3就能做出就好啦。

{ 发表评论 }

姓 名 (必填)

邮 件 (必填)

网 站