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

时间:2024-03-03 12:52:07

使用以上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动画效果,如下:

  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\'
  20. }, options);

javascript调用如下:

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

 

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

HTML代码

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

  1. <div id="timeline">
  2. <ul id="dates">
  3. <li><a href="#2001">2001</a></li>
  4. <li><a href="#2002">2002</a></li>
  5. <li><a href="#2003">2003</a></li>
  6. <li><a href="#2004">2004</a></li>
  7. <li><a href="#2005">2005</a></li>
  8. <li><a href="#2006">2006</a></li>
  9. <li><a href="#2007">2007</a></li>
  10. </ul>
  11. <ul id="issues">
  12. <li id="2001">
  13. <img class="fixie" width="256" height="256" />
  14. <h1>2001</h1>
  15. <p class="fixie"></p>
  16. </li>
  17. <li id="2002">
  18. <img class="fixie" width="256" height="256" />
  19. <h1>2002</h1>
  20. <p class="fixie"></p>
  21. </li>
  22. <li id="2003">
  23. <img class="fixie" width="256" height="256" />
  24. <h1>2003</h1>
  25. <p class="fixie"></p>
  26. </li>
  27. <li id="2004">
  28. <img class="fixie" width="256" height="256" />
  29. <h1>2004</h1>
  30. <p class="fixie"></p>
  31. </li>
  32. <li id="2005">
  33. <img class="fixie" width="256" height="256" />
  34. <h1>2005</h1>
  35. <p class="fixie"></p>
  36. </li>
  37. <li id="2006">
  38. <img class="fixie" width="256" height="256" />
  39. <h1>2006</h1>
  40. <p class="fixie"></p>
  41. </li>
  42. <li id="2007">
  43. <img class="fixie" width="256" height="256" />
  44. <h1>2007</h1>
  45. <p class="fixie"></p>
  46. </li>
  47. </ul>
  48. <div id="grad_left"></div>
  49. <div id="grad_right"></div>
  50. <a href="#" id="next">+</a>
  51. <a href="#" id="prev">-</a>
  52. </div> 

CSS代码

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

  1. * {
  2. margin: 0;
  3. padding: 0;
  4. }
  5.  
  6. body {
  7. background: #222;
  8. font-family: Georgia, serif;
  9. color: #707070;
  10. font-size: 14px;
  11. }
  12.  
  13. a {
  14. color: #404040;
  15. text-decoration: none;
  16. -webkit-transition: 0.5s;
  17. -moz-transition: 0.5s;
  18. -o-transition: 0.5s;
  19. -ms-transition: 0.5s;
  20. transition: 0.5s;
  21. }
  22. a:hover,
  23. a.selected {
  24. color: #808080;
  25. }
  26.  
  27. h1,h2,h4,h5,h6 {
  28. text-align: center;
  29. color: #ccc;
  30. text-shadow: #000 1px 1px 2px;
  31. margin-bottom: 5px;
  32. }
  33. h1 {
  34. font-size: 18px;
  35. }
  36. h2 {
  37. font-size: 14px;
  38. }
  39. .sociales {
  40. text-align: center;
  41. margin-bottom: 20px;
  42. }
  43.  
  44. #timeline {
  45. width: 788px;
  46. height: 350px;
  47. overflow: hidden;
  48. margin: 100px auto;
  49. position: relative;
  50. background: url(\'../images/dot.png\') left 45px repeat-x;
  51. }
  52. #dates {
  53. width: 120px;
  54. height: 60px;
  55. overflow: hidden;
  56. }
  57. #dates li {
  58. list-style: none;
  59. float: left;
  60. width: 150px;
  61. height: 50px;
  62. font-size: 24px;
  63. text-align: center;
  64. background: url(\'../images/bdot.png\') center bottom no-repeat;
  65. }
  66. #dates a {
  67. line-height: 38px;
  68. padding-bottom: 10px;
  69. color: #CCC;
  70. }
  71. #dates .selected {
  72. font-size: 30px;
  73. color: #5DB0E6;
  74. padding-bottom: 12px;
  75. background: url(\'../images/bdot1.png\') center bottom no-repeat;
  76. }
  77. #issues {
  78. width: 788px;
  79. height: 350px;
  80. overflow: hidden;
  81. }
  82. #issues li {
  83. width: 788px;
  84. height: 350px;
  85. list-style: none;
  86. float: left;
  87. }
  88. #issues li.selected img {
  89. -webkit-transform: scale(1.1,1.1);
  90. -moz-transform: scale(1.1,1.1);
  91. -o-transform: scale(1.1,1.1);
  92. -ms-transform: scale(1.1,1.1);
  93. transform: scale(1.1,1.1);
  94. }
  95. #issues li img {
  96. float: left;
  97. margin: 10px 30px 10px 50px;
  98. background: transparent;
  99. -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE 8 */
  100. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);/* IE 6 & 7 */
  101. zoom: 1;
  102. -webkit-transition: all 2s ease-in-out;
  103. -moz-transition: all 2s ease-in-out;
  104. -o-transition: all 2s ease-in-out;
  105. -ms-transition: all 2s ease-in-out;
  106. transition: all 2s ease-in-out;
  107. -webkit-transform: scale(0.7,0.7);
  108. -moz-transform: scale(0.7,0.7);
  109. -o-transform: scale(0.7,0.7);
  110. -ms-transform: scale(0.7,0.7);
  111. transform: scale(0.7,0.7);
  112. }
  113. #issues li h1 {
  114. color: #5DB0E6;
  115. font-size: 48px;
  116. margin: 20px 0;
  117. text-shadow: #000 1px 1px 2px;
  118. }
  119. #issues li p {
  120. font-size: 14px;
  121. margin-right: 70px;
  122. font-weight: normal;
  123. line-height: 22px;
  124. text-shadow: #000 1px 1px 2px;
  125. }
  126. #grad_left,
  127. #grad_right {
  128. width: 100px;
  129. height: 350px;
  130. position: absolute;
  131. top: 0;
  132. }
  133. #grad_left {
  134. left: 0;
  135. background: url(\'../images/grad_left.png\') repeat-y;
  136. }
  137. #grad_right {
  138. right: 0;
  139. background: url(\'../images/grad_right.png\') repeat-y;
  140. }
  141. #next,
  142. #prev {
  143. position: absolute;
  144. top: 0;
  145. font-size: 70px;
  146. top: 170px;
  147. width: 22px;
  148. height: 38px;
  149. background-position: 0 0;
  150. background-repeat: no-repeat;
  151. text-indent: -9999px;
  152. overflow: hidden;
  153. }
  154. #next:hover,
  155. #prev:hover {
  156. background-position: 0 -76px;
  157. }
  158. #next {
  159. right: 0;
  160. background-image: url(\'../images/next.png\');
  161. }
  162. #prev {
  163. left: 0;
  164. background-image: url(\'../images/prev.png\');
  165. }
  166. #next.disabled,
  167. #prev.disabled {
  168. opacity: 0.2;
  169. }
 全部代码书写完毕, 大家可以查看在线演示来浏览效果,如果你有更好的建议,请给我们留言,谢谢!

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