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

$(‘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);

javascript调用如下：

$(function(){

Cufon.replace('#timeline a, #timeline h1').CSS.ready(function() {

$().timelinr({autoPlay:'true', autoPlayPause:'3000', cssAnimation:'tada'});

});

});

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

HTML代码

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

<div id="timeline">

<ul id="dates">

<li><a href="#2001">2001</a></li>

<li><a href="#2002">2002</a></li>

<li><a href="#2003">2003</a></li>

<li><a href="#2004">2004</a></li>

<li><a href="#2005">2005</a></li>

<li><a href="#2006">2006</a></li>

<li><a href="#2007">2007</a></li>

</ul>

<ul id="issues">

<li id="2001">

<img class="fixie" width="256" height="256" />

<h1>2001</h1>

<p class="fixie"></p>

</li>

<li id="2002">

<img class="fixie" width="256" height="256" />

<h1>2002</h1>

<p class="fixie"></p>

</li>

<li id="2003">

<img class="fixie" width="256" height="256" />

<h1>2003</h1>

<p class="fixie"></p>

</li>

<li id="2004">

<img class="fixie" width="256" height="256" />

<h1>2004</h1>

<p class="fixie"></p>

</li>

<li id="2005">

<img class="fixie" width="256" height="256" />

<h1>2005</h1>

<p class="fixie"></p>

</li>

<li id="2006">

<img class="fixie" width="256" height="256" />

<h1>2006</h1>

<p class="fixie"></p>

</li>

<li id="2007">

<img class="fixie" width="256" height="256" />

<h1>2007</h1>

<p class="fixie"></p>

</li>

</ul>

<div id="grad_left"></div>

<div id="grad_right"></div>

<a href="#" id="next">+</a>

<a href="#" id="prev">-</a>

</div>

CSS代码

不同方向展示的时间轴，使用不同的样式文件，这里我们只列出水平时间轴样式：

* {

margin: 0;

padding: 0;

}

body {

background: #222;

font-family: Georgia, serif;

color: #707070;

font-size: 14px;

}

a {

color: #404040;

text-decoration: none;

-webkit-transition: 0.5s;

-moz-transition: 0.5s;

-o-transition: 0.5s;

-ms-transition: 0.5s;

transition: 0.5s;

}

a:hover,

a.selected {

color: #808080;

}

h1,h2,h4,h5,h6 {

text-align: center;

color: #ccc;

text-shadow: #000 1px 1px 2px;

margin-bottom: 5px;

}

h1 {

font-size: 18px;

}

h2 {

font-size: 14px;

}

.sociales {

text-align: center;

margin-bottom: 20px;

}

#timeline {

width: 788px;

height: 350px;

overflow: hidden;

margin: 100px auto;

position: relative;

background: url('../images/dot.png') left 45px repeat-x;

}

#dates {

width: 120px;

height: 60px;

overflow: hidden;

}

#dates li {

list-style: none;

float: left;

width: 150px;

height: 50px;

font-size: 24px;

text-align: center;

background: url('../images/bdot.png') center bottom no-repeat;

}

#dates a {

line-height: 38px;

padding-bottom: 10px;

color: #CCC;

}

#dates .selected {

font-size: 30px;

color: #5DB0E6;

padding-bottom: 12px;

background: url('../images/bdot1.png') center bottom no-repeat;

}

#issues {

width: 788px;

height: 350px;

overflow: hidden;

}

#issues li {

width: 788px;

height: 350px;

list-style: none;

float: left;

}

#issues li.selected img {

-webkit-transform: scale(1.1,1.1);

-moz-transform: scale(1.1,1.1);

-o-transform: scale(1.1,1.1);

-ms-transform: scale(1.1,1.1);

transform: scale(1.1,1.1);

}

#issues li img {

float: left;

margin: 10px 30px 10px 50px;

background: transparent;

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE 8 */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);/* IE 6 & 7 */

zoom: 1;

-webkit-transition: all 2s ease-in-out;

-moz-transition: all 2s ease-in-out;

-o-transition: all 2s ease-in-out;

-ms-transition: all 2s ease-in-out;

transition: all 2s ease-in-out;

-webkit-transform: scale(0.7,0.7);

-moz-transform: scale(0.7,0.7);

-o-transform: scale(0.7,0.7);

-ms-transform: scale(0.7,0.7);

transform: scale(0.7,0.7);

}

#issues li h1 {

color: #5DB0E6;

font-size: 48px;

margin: 20px 0;

text-shadow: #000 1px 1px 2px;

}

#issues li p {

font-size: 14px;

margin-right: 70px;

font-weight: normal;

line-height: 22px;

text-shadow: #000 1px 1px 2px;

}

#grad_left,

#grad_right {

width: 100px;

height: 350px;

position: absolute;

top: 0;

}

#grad_left {

left: 0;

background: url('../images/grad_left.png') repeat-y;

}

#grad_right {

right: 0;

background: url('../images/grad_right.png') repeat-y;

}

#next,

#prev {

position: absolute;

top: 0;

font-size: 70px;

top: 170px;

width: 22px;

height: 38px;

background-position: 0 0;

background-repeat: no-repeat;

text-indent: -9999px;

overflow: hidden;

}

#next:hover,

#prev:hover {

background-position: 0 -76px;

}

#next {

right: 0;

background-image: url('../images/next.png');

}

#prev {

left: 0;

background-image: url('../images/prev.png');

}

#next.disabled,

#prev.disabled {

opacity: 0.2;

}

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

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