使用jQuery timelinr和animate.css建立超酷的CSS動畫時間軸特效

時間 2020-06-15

標籤使用 jquery timelinr animate.css animate css 建立動畫時間軸特效欄目 JQuery 简体版

原文原文鏈接

在過去咱們的文章中，咱們介紹過不少不錯的時間軸插件，使用這些超棒的插件能夠幫助你建立動感漂亮的時間軸展現，其中比較不錯的插件以下：javascript

使用以上jQuery插件或者類庫均可以建立漂亮的時間軸timline特效。css

因爲在咱們的gbtags.com社區開發中，咱們須要建立一個簡單實用的用戶時間軸應用，這裏咱們選擇使用Timelinr來開發，而且爲了使得動畫過程更加豐富和有趣咱們同時使用Animate.css來建立各類不一樣的CSS動畫特效。html

須要使用到的第三方插件和CSS類庫以下：java

Timelinr是一個時間軸的jQuery插件實現，你能夠方便的使用它來生成一個動態的時間軸特效，提供了垂直和水平顯示方式，而且支持自動播放。jquery

Animate.css是由Dan Eden開發的一套超棒的CSS動畫類庫，幫助你使用純CSS來實現各類不一樣的動畫特效。前面咱們曾經專題介紹過Animate.css，若是你不瞭解，請閱讀這篇文章：超棒的跨瀏覽器純CSS動畫實現 - Animate.csscss3

fixie.js在咱們之前的文章中介紹過，是一個自動幫助你填充內容的迷你類庫，若是你厭倦了拷貝一堆內容的話，能夠使用它來自動生成內容，我的很是喜歡，這裏我將使用它來生成圖片和文字內容。web

這裏咱們使用cufon在生成更加個性化的年份，cufon.js會將制定的文字轉化爲畫布圖片。瀏覽器

Javascript代碼

由於jQuery timelinr是一個插件，爲了更好的封裝它，咱們這裏直接修改插件內容，缺省的動畫效果比較簡單，只是在每一個頁面以放大的方式來展現圖片，咱們但願可以添加更多特效，這裏經過添加animate.css中定義的動畫class來實現。框架

使用animate很是簡單，你只須要使用jQuery的addClass方法調用對應的類，便可實現CSS動畫效果，以下：jsp

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