zoukankan      html  css  js  c++  java

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

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

    使用以上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'
    21. }, options);
     
     

    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来自动生成具体内容：

    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. }
    72. #dates .selected {
    73. font-size: 30px;
    74. color: #5DB0E6;
    75. padding-bottom: 12px;
    76. background: url('../images/bdot1.png') center bottom no-repeat;
    77. }
    79. #issues {
    80. width: 788px;
    81. height: 350px;
    82. overflow: hidden;
    83. }
    84. #issues li {
    85. width: 788px;
    86. height: 350px;
    87. list-style: none;
    88. float: left;
    89. }
    90. #issues li.selected img {
    91. -webkit-transform: scale(1.1,1.1);
    92. -moz-transform: scale(1.1,1.1);
    93. -o-transform: scale(1.1,1.1);
    94. -ms-transform: scale(1.1,1.1);
    95. transform: scale(1.1,1.1);
    96. }
    97. #issues li img {
    98. float: left;
    99. margin: 10px 30px 10px 50px;
    100. background: transparent;
    101. -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE 8 */
    102. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);/* IE 6 & 7 */
    103. zoom: 1;
    104. -webkit-transition: all 2s ease-in-out;
    105. -moz-transition: all 2s ease-in-out;
    106. -o-transition: all 2s ease-in-out;
    107. -ms-transition: all 2s ease-in-out;
    108. transition: all 2s ease-in-out;
    109. -webkit-transform: scale(0.7,0.7);
    110. -moz-transform: scale(0.7,0.7);
    111. -o-transform: scale(0.7,0.7);
    112. -ms-transform: scale(0.7,0.7);
    113. transform: scale(0.7,0.7);
    114. }
    115. #issues li h1 {
    116. color: #5DB0E6;
    117. font-size: 48px;
    118. margin: 20px 0;
    119. text-shadow: #000 1px 1px 2px;
    120. }
    121. #issues li p {
    122. font-size: 14px;
    123. margin-right: 70px;
    124. font-weight: normal;
    125. line-height: 22px;
    126. text-shadow: #000 1px 1px 2px;
    127. }
    129. #grad_left,
    130. #grad_right {
    131. width: 100px;
    132. height: 350px;
    133. position: absolute;
    134. top: 0;
    135. }
    136. #grad_left {
    137. left: 0;
    138. background: url('../images/grad_left.png') repeat-y;
    139. }
    140. #grad_right {
    141. right: 0;
    142. background: url('../images/grad_right.png') repeat-y;
    143. }
    145. #next,
    146. #prev {
    147. position: absolute;
    148. top: 0;
    149. font-size: 70px;
    150. top: 170px;
    151. width: 22px;
    152. height: 38px;
    153. background-position: 0 0;
    154. background-repeat: no-repeat;
    155. text-indent: -9999px;
    156. overflow: hidden;
    157. }
    158. #next:hover,
    159. #prev:hover {
    160. background-position: 0 -76px;
    161. }
    162. #next {
    163. right: 0;
    164. background-image: url('../images/next.png');
    165. }
    166. #prev {
    167. left: 0;
    168. background-image: url('../images/prev.png');
    169. }
    170. #next.disabled,
    171. #prev.disabled {
    172. opacity: 0.2;
    173. }
     
     

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

    原文链接：http://www.gbtags.com/gb/share/5862.htm
  • 相关阅读:
    js 与 asp.net 验证控件冲突解决方法
    图片处理(给图片加水印)
    JS打开窗口
    ASP.NET编程中的十大技巧
    【ASP.NET】FCKeditor 2.6 + Asp.Net 设置
    XML文件设置树形结构(无限级)原创
    利用vs.net快速开发windows服务(c#) (转载)
    C#反射 学习
    C#解压RAR压缩文件(转载测试通过)
    SQL显示字段信息
  • 原文地址：https://www.cnblogs.com/gbtagscom/p/4994577.html
Copyright © 2011-2022 走看看