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

2018-03-30 来源:gbin1.com 作者:佚名 点击: 评论:
由于在我们的gbtags com社区开发中,我们需要创建一个简单实用的用户时间轴应用,这里我们选择使用Timelinr来开发,并且为了使得动画过程更加丰富和有趣我们同时使用Animat
使用jQuery timelinr和animate.css创建超酷的CSS动画时间轴特效

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

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

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

1.Timeline

2.Timelinr

3.TimergliderJS

4.Chronoline

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

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

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

1.Timelinr

2.Animate.css

3.fixie.js

4.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技巧 >
标题:使用jQuery timelinr和animate.css创建超酷的CSS动画时间轴特效
网址:http://www.timsion.com/css/30188.html

关键词:天晟网络 jQuerytimelinr animate css

上一篇:超棒的跨浏览器纯CSS动画实现:Animate.css
下一篇:帮助设计师和开发者的9种实用CSS技巧

免责声明:以上内容来自互联网和用户投稿,不代表本站的观点和立场,版权归原作者所有,如有侵权,请与我们联系。