使用jQuery timelinr和animate.css创建超酷的CSS动画时间轴特效

标签: jquery timelinr animate | 发表时间:2012-09-13 08:51 | 作者:jjfat
出处:http://www.yeeyan.org

译者 jjfat

使用jQuery timelinr和animate.css创建超酷的CSS动画时间轴特效

在线演示1  在线演示2  本地下载

在过去我们的文章中,我们介绍过很多不错的 时间轴插件,使用这些超棒的插件可以帮助你创建动感漂亮的时间轴展示,其中比较不错的插件如下:

使用以上jQuery插件或者类库都可以创建漂亮的时间轴timline特效。

由于在我们的 gbtags.com社区开发中,我们需要创建一个简单实用的用户时间轴应用,这里我们选择使用Timelinr来开发,并且为了使得动画过程更加丰富和有趣我们同时使用 Animate.css来创建各种不同的CSS动画特效。

需要使用到的第三方插件和CSS类库如下:

Timelinr是一个时间轴的jQuery插件实现,你可以方便的使用它来生成一个动态的时间轴特效,提供了垂直和水平显示方式,并且支持自动播放。

Animate.css是由Dan Eden开发的一套超棒的CSS动画类库,帮助你使用纯CSS来实现各种不同的动画特效。前面我们曾经专题介绍过 Animate.css,如果你不了解,请阅读这篇文章: 超棒的跨浏览器纯CSS动画实现 - Animate.css

fixie.js在我们以前的文章中介绍过,是一个自动帮助你填充内容的迷你类库,如果你厌倦了拷贝一堆内容的话,可以使用它来自动生成内容,个人非常喜欢,这里我将使用它来生成图片和文字内容。

这里我们使用cufon在生成更加个性化的年份, cufon.js会将制定的文字转化为画布图片。


Javascript代码

因为jQuery timelinr是一个插件,为了更好的封装它,我们这里直接修改插件内容,缺省的动画效果比较简单,只是在每个页面以放大的方式来展示图片,我们希望能够添加更多特效,这里通过添加animate.css中定义的动画class来实现。

使用animate非常简单,你只需要使用jQuery的addClass方法调用对应的类,即可实现CSS动画效果,如下:

$(‘somediv').addClass('animated shake').delay(1000).queue(function(next){
    $(this).removeClass('animated shake');
    next();
});

注意以上代码中,我们使用delay方法来延迟1秒来让动画完成,然后再将添加的class删除,以便下次再次调用addClass生成动画效果

在插件中找到相关代码,如下:

$(settings.issuesDiv+' li').animate({'opacity':settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed});
$(settings.issuesDiv+' li.'+settings.issuesSelectedClass).removeClass(settings.issuesSelectedClass).next().fadeTo(settings.issuesTransparencySpeed, 1).addClass(settings.issuesSelectedClass);

注释后,换成我们需要执行的动画:

$(settings.issuesDiv+' li').addClass('animated ' +  cssAnimation).delay(1000).queue(function(next){
	$(this).removeClass('animated ' +  cssAnimation);
	next();
});

另外, 我们使用cufon来将文字生成图片,主要需要在class变化的时候,重新调用cufon,如下:

$(settings.datesDiv+' a.'+settings.datesSelectedClass).removeClass(settings.datesSelectedClass).parent().next().children().addClass(settings.datesSelectedClass).delay(500).queue(								
function(next){
	next();
	Cufon.refresh();
});

这里我们添加一个选项cssAnimation,缺省值为“lightSpeedIn”,这样方便我们自己定义动画类型。

	settings = jQuery.extend({
		orientation: 				'horizontal',		// value: horizontal | vertical, default to horizontal
		containerDiv: 				'#timeline',		// value: any HTML tag or #id, default to #timeline
		datesDiv: 					'#dates',			// value: any HTML tag or #id, default to #dates
		datesSelectedClass: 		'selected',			// value: any class, default to selected
		datesSpeed: 				'normal',			// value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to normal
		issuesDiv: 					'#issues',			// value: any HTML tag or #id, default to #issues
		issuesSelectedClass: 		'selected',			// value: any class, default to selected
		issuesSpeed: 				'fast',				// value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to fast
		issuesTransparency: 		0.2,				// value: integer between 0 and 1 (recommended), default to 0.2
		issuesTransparencySpeed: 	500,				// value: integer between 100 and 1000 (recommended), default to 500 (normal)
		prevButton: 				'#prev',			// value: any HTML tag or #id, default to #prev
		nextButton: 				'#next',			// value: any HTML tag or #id, default to #next
		arrowKeys: 					'false',			// value: true | false, default to false
		startAt: 					1,					// value: integer, default to 1 (first)
		autoPlay: 					'false',			// value: true | false, default to false
		autoPlayDirection: 			'forward',			// value: forward | backward, default to forward
		autoPlayPause: 				2000,				// value: integer (1000 = 1 seg), default to 2000 (2segs)
		cssAnimation: 'lightSpeedIn'
		
	}, options);
来源: 使用jQuery timelinr和animate.css创建超酷的CSS动画时间轴特效

相关 [jquery timelinr animate] 推荐:

[转]jquery自定义动画animate()

- - dxh_0829的专栏
在以前很长一段时间里,网页上的各种特效还需要采用flash 在进行. 但最近几年里,我们已经很少看到这种情况了,绝大部分已经使用JavaScript 动画效果来取代flash. 说的取代是网页特效部分,而不是动画. 网页特效比如:渐变菜单、渐进显示、图片轮播等;而动画比如:故事情节广告、MV 等等.

使用jQuery timelinr和animate.css创建超酷的CSS动画时间轴特效

- - 译言-电脑/网络/数码科技
在线演示1  在线演示2  本地下载. 在过去我们的文章中,我们介绍过很多不错的 时间轴插件,使用这些超棒的插件可以帮助你创建动感漂亮的时间轴展示,其中比较不错的插件如下:. 使用以上jQuery插件或者类库都可以创建漂亮的时间轴timline特效. 由于在我们的 gbtags.com社区开发中,我们需要创建一个简单实用的用户时间轴应用,这里我们选择使用Timelinr来开发,并且为了使得动画过程更加丰富和有趣我们同时使用 Animate.css来创建各种不同的CSS动画特效.

adobe神器Animate教程:创建HTML5动画(二)

- - 优设(UISDC)
久等了,上集我们制作了一个具有行走动作的蓝精灵动画,本集我们来为蓝精灵实现往返走动的效果. Symbol,即元件,是动画制作中常用的概念. 通过Symbol我们可以封装独立的动画元素,便于管理和重用. 脚本,是动画制作中另一个重要的概念. 在HTML5动画制作中,脚本即JavaScript脚本,通过脚本我们可以响应动画事件,实现交互,更自由的操控动画元素,比如元件动画的重复播放.

神器Animate教程:使用SpriteSheet创建HTML5动画

- - 优设(UISDC)
在Flash动画制作中,使用SpriteSheet制作动画元素是一个常见和普遍的方法. 在Edge Animate中,我们也可以利用SpriteSheet来制作HTML5动画. 本文将从一个示例出发,介绍在Edge Animate中如何使用SpriteSheet. 在文章 《EDGE ANIMATE:ADOBE新推制作HTML5动画可视化工具》中,可以看到一个简单的蓝精灵动画,一个蓝精灵从屏幕左侧走到右侧,又返回,然后不断重复.

JQuery 选择器

- - CSDN博客Web前端推荐文章
}

点击我

.    像上面这样把JavaSript代码和HTML代码混杂在一起的做法同样也非常不妥,因为它并没有将网页内容和行为分离,所以才有JQuery选择器的学习.

点击我

. //给class为demo的元素添加行为.

jquery操作xml

- - CSDN博客Web前端推荐文章
jquery真的很强大,虽然一直在用jquery,不用一直都没有深入,这几天重新学习了一下,不得不感叹她的强大,已经让我深深入迷. 这里记录一下,她是怎么快速地操作xml的.. 这里我们有一个xml文件:. jquery如何操作呢,总的思想,就是和操作dom差不多的方法. 首先我们获取这个文件的内容:(我先引入jquery库哈).

jQuery JSONP跨域

- - Web前端 - ITeye博客
基于Jquery的Ajax跨域访问. 单点登录服务器(sso服务器). 登录网页项目的时候,由于使用了单点登录,所以页面会跳转到sso服务器,进行统一登录,. 现在需要在该界面增加令牌的认证,但是SSO服务器和令牌服务器部署在不同的服务器,且暂时没有要合并的可能,所以在SSO登录的时候必须要对令牌进行验证,就必须涉及到了跨域访问的问题.

jquery 插件

- - JavaScript - Web前端 - ITeye博客
 jQuery插件的开发包括两种:. 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法. jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级别的插件开发,即给jQuery对象添加方法. 下面就两种函数的开发做详细的说明. 1 、类级别的插件开发.

让jquery更快

- - JavaScript - Web前端 - ITeye博客
很久没有关注jQuery了,最近重新看了一下,看到一些不错的文章,转来坐一下笔记. 其内容和一些新提供的方法还是很多有值得学习的地方. 使用最新版本的jQuery. jQuery的版本更新很快,你应该总是使用最新的版本. 因为新版本会改进性能,还有很多新功能. 下面就来看看,不同版本的jQuery性能差异有多大.

jQuery Tools:Web开发必备的 jQuery UI 库

- - 博客园_首页
jQuery Tools 是基于. jQuery 开发的网站界面库,包含网站最常用的Tabs(选项卡)、Tooltip(信息提示)、Overlay(遮罩、弹窗)、Scrollable(滚动控制)、Form Validator(表单验证)、Rangeinput(范围选择)、Dateinput(日期选择)等众多功能.