CSS图书馆 » HTML & CSS » 制作有吸引力的文字动画效果-textillate.js

制作有吸引力的文字动画效果-textillate.js

发表于: HTML & CSS. 评论 (3)
赞助商链接

看过好莱坞电影的都知道它的特效都很棒,即使是文字效果也很细节,然而我们在网页上使用这些特效最佳的方法就是用JavaScript来写了,今天将和大家分享有关文字动画jQuery插件和textillate.js一个实例教程,这些效果可能不是很常用,但有时候我们做专题或其它推广页面可以使用一下,至于能弄出什么效果,哪就要看你的想象力啦。

textillate.js文字实例

首先你可以看看textillate.js的官方演示页,里面有很多效果展示出来。

下面我也利用textillate.js制作了一个简单的文字动画页面,欢迎拍砖……

先看看实例吧:设计达人版 Demo演示 →

还有多少动画效果?请查看Animate.css网站。

教程代码讲解

STEP:1 加载所需必要的JS和CSS文件

<link href="assets/animate.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="assets/jquery.lettering.js"></script>
<script src="jquery.textillate.js"></script> 

STEP2:

基本HTML代码

<h1 class="tlt">My Title</h1>

添加javascript代码

$('.ef').textillate({ in: { effect: 'rollIn' } });

添加动画效果,看data属性就是roolIn就是动画名称了。

<h1 class="ef" data-in-effect="rollIn">Tittle</h1>

另外你可以参考下面详细的设定:
$('.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

shuffle

Demo演示
插件下载页

Sliding Letters

sliding

Demo演示

3D Flying Text

3d

Demo演示
插件下载页

Codename Rainbows

gridient

Demo链接

Textualizer

texlizer
Demo演示

最后最后

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

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:结交更多有才华的设计师?请加入UI设计QQ群,与50000名设计师交流设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。