検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >jQuery timelinr と animate.css を使用してクールな CSS アニメーション タイムラインを作成する Effects_html/css_WEB-ITnose

jQuery timelinr と animate.css を使用してクールな CSS アニメーション タイムラインを作成する Effects_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:32:551581ブラウズ

過去の記事で、優れたタイムライン プラグインを多数紹介しました。これらのプラグインを使用すると、ダイナミックで美しいタイムライン表示を作成できます。

  • タイムライン
  • Timelinr
  • TimergliderJS
  • Chronoline

    • 上記の jQuery プラグインまたはクラス ライブラリを使用して、美しいタイムライン ティムライン エフェクトを作成します。

    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 で定義されたアニメーション クラスを追加することで、より多くの特殊効果を追加できることを期待しています。

    animate の使用は非常に簡単です。次のように、jQuery の addClass メソッドを使用して、対応するクラスを呼び出して CSS アニメーション効果を実現するだけです:

    1. $('somediv').addClass('animated shade')。 late (1000).queue(function(next){
    2. $(this).removeClass('animated shade');
    3. next();
    4. });

    上記のコードでは、遅延メソッドを使用してアニメーションが完了できるように 1 秒遅延させ、次に 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);

    コメントした後、実行する必要があるアニメーションに変更します:

      $(settings.issuesDiv+' li').addClass('animated ' + cssAnimation).delay(1000).queue(function(next){
      2. $(this).removeClass('animated ' + cssAnimation);
      3. next();

    また、主にテキストから画像へのテキストを生成するために cufon を使用します。次のように、クラスが変更されたときに cufon を再度呼び出す必要があります:

    $(settings.datesDiv+' a.'+settings.datesSelectedClass).removeClass(settings.datesSelectedClass).parent().next().children ().addClass(settings.datesSelectedClass).delay(500).queue(

    function(next){

    1. next();
    2. Cufon.refresh();
    3. });

    ここで、cssAnimation オプションを追加します。デフォルト値は「lightSpeedIn」です。これにより、アニメーション タイプを自分で定義することが簡単になります。

    1. settings = jQuery.extend({
    2. Orientation: 'horizo​​ntal', // 値: 水平 | 垂直、デフォルトは水平です
    3. containerDiv: '#timeline', // 値: 任意の HTML タグまたは #id,デフォルトは #timeline
    4. daysDiv: '#dates', // 値: 任意の HTML タグまたは #id、デフォルトは #dates
    5. daysSelectedClass: 'selected', // 値: 任意のクラス、デフォルトは selected
    6. dateSpeed: 'normal', // 値: 100 ～ 1000 の整数 (推奨) または 'slow'、'normal' または 'fast'; デフォルトは通常です
    7. issuesDiv: '#issues', // 値: 任意の HTML タグまたは # id、デフォルトは #issues
    8. issuesSelectedClass: 'selected', // 値: 任意のクラス、デフォルトは selected
    9. issuesSpeed: 'fast', // 値: 100 ～ 1000 の整数 (推奨) または 'slow', ' Normal' または 'fast'; デフォルトは fast です
    10. issuesTransparency: 0.2, // 値: 0 から 1 までの整数 (推奨)、デフォルトは 0.2 です
    11. issuesTransparencySpeed: 500, // 値: 100 から 1000 までの整数 (推奨) 、デフォルトは 500 (通常) です
    12. prevButton: '#prev', // 値: 任意の HTML タグまたは #id、デフォルトは #prev
    13. nextButton: '#next', // 値: 任意の HTML タグまたは #id 、デフォルトは #next
    14. arrowKeys: 'false', // value: true | false、デフォルトは false
    15. startAt: 1, // 値: 整数、デフォルトは 1 (最初)
    16. autoPlay: 'false', // 値: true | false、デフォルトは false
    17. autoPlayDirection: 'forward', // 値: forward |逆方向、デフォルトは順方向
    18. autoPlayPause: 2000, // 値: 整数 (1000 = 1 セグ)、デフォルトは 2000 (2 セグ)
    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 を使用して美化文字を生成するために必要なすべての要素を置き換え、その後タイムライナー ツールを使用して、ここではアニメーション タイプを tada に設定しています。他の効果を作成する必要がある場合は、独自にタイプを変更します。

    HTML 内に年と時刻を含む目的の内容を設定します。文字と図片、里代コード很简单、1 つのフレームのみが含まれます、私は fixie.js を使用して特定の内容を自動生成します:

      • 2001

      • 2002

      • 2003

      • 2004

      • 2005

      • 2006

      • 2007

    CSS コード

    異なる方向に表示されるタイムラインは異なるスタイル ファイルを使用します。 ここでは、水平方向のタイムライン スタイルのみをリストします。

    1. * {
    2. margin: 0;
    3. padding: 0;
    4. }
    6. body {
    7. background: #222;
    8. font-family: Georgia、serif;
    9. カラー: #707070 ;
    10. font-size: 14px;
    11. }
    13. a {
    14. color: #404040;
    15. text-decoration: none;
    16. -webkit-transition: 0.5s;
    17. -moz-遷移: 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. }
    27. h1,h2,h4,h5,h6 {
    28. text-align: center;
    29. color: #ccc;
    30. text-shadow: #000 1px 1px 2px;
    31. margin-下: 5px;
    32. }
    33. h1 {
    34. font-size: 18px;
    35. }
    36. h2 {
    37. font-size: 14px;
    38. }
    39. .sociales {
    40. text -align: 中央;
    41. margin-bottom: 20px;
    42. }
    44. #timeline {
    45. width: 788px;
    46. height: 350px;
    47. overflow: hidden;
    48. margin: 100px auto;
    49. 位置: 相対;
    50. 背景: url('../images/dot.png') left 45pxrepeat-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. 背景: url('../images/bdot.png') 中央下 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') 中央下 no-repeat;
    77. }
    79. #issues {
    80. width: 788px;
    81. height: 350px;
    82. overflow: hidden;
    83. }
    84. #issues li {
    85. 幅: 788px;
    86. 高さ: 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: スケール(1.1,1.1);
    93. -o-transform: スケール(1.1,1.1);
    94. -ms-transform: スケール(1.1,1.1);
    95. 変換: スケール(1.1) ,1.1);
    96. }
    97. #issues li img {
    98. float: left;
    99. margin: 10px 30px 10px 50px;
    100. バックグラウンド: 透明;
    101. -ms-filter: "progid:DXImageTransform.Microsoft.gradient (startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE 8 */
    102. フィルター: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);/* IE 6 & 7 */
    103. ズーム: 1;
    104. -webkit-transition:すべて 2 のイーズインアウト;
    105. -moz-transition: すべて 2 のイーズインアウト;
    106. -o-transition: すべて 2 のイーズインアウト;
    107. -ms-transition: すべて 2 のイーズイン-out;
    108. トランジション: すべて 2 のイーズインアウト;
    109. -webkit-transform:scale(0.7,0.7);
    110. -moz-transform:scale(0.7,0.7);
    111. -o-transform:スケール(0.7,0.7);
    112. -ms-transform: スケール(0.7,0.7);
    113. 変換: スケール(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 lip {
    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. 幅: 100px ;
      132. 高さ: 350px;
      133. 位置: 絶対;
      134. トップ: 0;
      135. }
      136. #grad_left {
      137. 左: 0;
      138. 背景: url('../images/grad_left.png')繰り返し-y;
      139. }
      140. #grad_right {
      141. right: 0;
      142. 背景: url('../images/grad_right.png') 繰り返し-y;
      143. }
    144. #next,
    145. #prev {
    146. 位置: 絶対;
    147. トップ: 0;
    148. フォントサイズ: 70px;
    149. トップ: 170px;
    150. 幅: 22px;
    151. 高さ: 38px;
    152. 背景位置: 0 0;
    153. 背景繰り返し: no-repeat;
    154. テキストインデント: -9999px;
    155. オーバーフロー: 非表示;
    156. }
    157. #next:hover,
    158. #prev:hover {
    159. 背景位置: 0 -76px;
    160. }
    161. #next {
    162. 右: 0;
    163. 背景画像: url('../images/next.png');
    164. }
    165. #prev {
    166. left: 0;
    167. background-image: url('../images/prev.png');
    168. }
    169. #next.disabled,
    170. #prev.disabled {
    171. 不透明度: 0.2;
    172. }

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

    声明：
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    前の記事：html と body_html/css_WEB-ITnose の高さ 100% によって引き起こされる問題次の記事：html と body_html/css_WEB-ITnose の高さ 100% によって引き起こされる問題

    関連記事

    続きを見る