> 웹 프론트엔드 > HTML 튜토리얼 > 使用jQuery timelinr和animate.css创建超酷的CSS动画时间轴特效_html/css_WEB-ITnose

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

WBOY
풀어 주다: 2016-06-24 11:32:55
원래의
1600명이 탐색했습니다.

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

  • 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动画效果,如下:

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

      • 2001
      • 2002
      • 2003
      • 2004
      • 2005
      • 2006
      • 2007
        • 使用jQuery timelinr和animate.css创建超酷的CSS动画时间轴特效_html/css_WEB-ITnose
        • 2001

        • 使用jQuery timelinr和animate.css创建超酷的CSS动画时间轴特效_html/css_WEB-ITnose
        • 2002

        • 使用jQuery timelinr和animate.css创建超酷的CSS动画时间轴特效_html/css_WEB-ITnose
        • 2003

        • 使用jQuery timelinr和animate.css创建超酷的CSS动画时间轴特效_html/css_WEB-ITnose
        • 2004

        • 使用jQuery timelinr和animate.css创建超酷的CSS动画时间轴特效_html/css_WEB-ITnose
        • 2005

        • 使用jQuery timelinr和animate.css创建超酷的CSS动画时间轴特效_html/css_WEB-ITnose
        • 2006

        • 使用jQuery timelinr和animate.css创建超酷的CSS动画时间轴特效_html/css_WEB-ITnose
        • 2007

         

         

        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. }

         

         

         

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

        원천:php.cn
        본 웹사이트의 성명
        본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
        인기 추천
        인기 튜토리얼
        더>
        최신 다운로드
        더>
        웹 효과
        웹사이트 소스 코드
        웹사이트 자료
        프론트엔드 템플릿