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

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

 

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

• Timeline
• Timelinr
• TimergliderJS
• Chronoline

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

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

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

• Timelinr
• Animate.css
• fixie.js
• cufon.js

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动画效果，如下：

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

 

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

在插件中找到相关代码，如下：

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

 

注释后，换成我们需要执行的动画：

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

 

 

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

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

 

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

1. settings = jQuery.extend({
2. orientation:'horizontal',// value: horizontal | vertical, default to horizontal
3. containerDiv:'#timeline',// value: any HTML tag or #id, default to #timeline
4. datesDiv:'#dates',// value: any HTML tag or #id, default to #dates
5. datesSelectedClass:'selected',// value: any class, default to selected
6. datesSpeed:'normal',// value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to normal
7. issuesDiv:'#issues',// value: any HTML tag or #id, default to #issues
8. issuesSelectedClass:'selected',// value: any class, default to selected
9. issuesSpeed:'fast',// value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to fast
10. issuesTransparency:0.2,// value: integer between 0 and 1 (recommended), default to 0.2
11. issuesTransparencySpeed:500,// value: integer between 100 and 1000 (recommended), default to 500 (normal)
12. prevButton:'#prev',// value: any HTML tag or #id, default to #prev
13. nextButton:'#next',// value: any HTML tag or #id, default to #next
14. arrowKeys:'false',// value: true | false, default to false
15. startAt:1,// value: integer, default to 1 (first)
16. autoPlay:'false',// value: true | false, default to false
17. autoPlayDirection:'forward',// value: forward | backward, default to forward
18. autoPlayPause:2000,// value: integer (1000 = 1 seg), default to 2000 (2segs)
19. cssAnimation:'lightSpeedIn'
21. }, options);

 原文：http://www.gbtags.com/gb/share/5862.htm

javascript调用如下：

1. $(function(){
2. Cufon.replace('#timeline a, #timeline h1').CSS.ready(function(){
4. $().timelinr({autoPlay:'true', autoPlayPause:'3000', cssAnimation:'tada'});
6. });
7. });

 

 

以上代码可以看到，我们调用cufon将所有需要生成美化字体的元素都替换掉，然后调用timeliner插件，这里我们自定义动画类型为：tada，如果你需要生成其它效果，请自己修改类型。

HTML代码

HTML中我们定义了年份和每一个时间轴项目的内容，包括，文字和图片，这里代码很简单，只包含了一个框架，我们使用fixie.js来自动生成具体内容：

 

 

全部代码书写完毕， 大家可以查看在线演示来浏览效果，如果你有更好的建议，请给我们留言，谢谢！

因为代码较长，完整内容请见原文：http://www.gbtags.com/gb/share/5862.htm