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

14 3 月, 2013 发表于: HTML & CSS. 评论 (3)

Sponsor

看过好莱坞电影的都知道它的特效都很棒，即使是文字效果也很细节，然而我们在网页上使用这些特效最佳的方法就是用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

Demo演示

插件下载页
Sliding Letters

Demo演示
3D Flying Text

Demo演示

插件下载页
Codename Rainbows

Demo链接
Textualizer


Demo演示
最后最后
好吧，剩下的就交给你了。发挥你的创意和想像力吧！
				   推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com

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


	赞助商链接
	


 

					与 css、CSS3、javascript、jQuery 相关的文章
					
												
							
							
							
							
							
							CSS border-radius 新玩法(含可视化生成工具)
							
													
							
							
							
							
							
							Tippy.js 玩转鼠标悬停提示信息
							
													
							
							
							
							
							
							CSS 或 srcset 让浏览器自动切换 1X/2X/3X 图像
							
													
							
							
							
							
							
							小创意：圣诞球切换开关
							
													
							
							
							
							
							
							给网站增加交互音效 – Loud links轻量插件
							
													
							
							
							
							
							
							Macy.js 网页流布局JS插件，仅4KB大小
							
										


赞助商链接















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

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