[JS]年表や社史など、アニメーションでスライドする時間軸コンテンツを簡単に実装できるスクリプト -Timelinr

サイト構築 -JavaScript

Post on:2011年10月20日

sponsorsr

時間軸に沿って、コンテンツをアニメーションでスライド表示するスクリプトを紹介します。

jQuery Timelinr

[ad#ad-2]

Timelinrのデモ
Timelinrの実装

Timelinrのデモ

デモでは、水平レイアウト、垂直レイアウト、オートプレイの3種類があります。
スライドのアニメーションもかっこいいですが、パネル表示時のズームもいいですね。

デモ：水平レイアウト

デモ：垂直レイアウト

デモ：オートプレイ

[ad#ad-2]

Timelinrの実装

HTML

時間とパネルをそれぞれリスト要素で実装し、divで内包します。
「#timele, #dates, #issues」はデフォルトの設定です。

<div id="timeline">
   <ul id="dates">
      <li><a href="#">date1</a></li>
      <li><a href="#">date2</a></li>
   </ul>
   <ul id="issues">
      <li id="date1">
         <p>Lorem ipsum.</p>
      </li>
      <li id="date2">
         <p>Lorem ipsum.</p>
      </li>
   </ul>
   <a href="#" id="next">+</a> <!-- optional -->
   <a href="#" id="prev">-</a> <!-- optional -->
</div>

外部ファイル

「jquery.js」と当スクリプトを外部ファイルとして指定します。

<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="js/jquery.timelinr-0.9.js" type="text/javascript"></script>

JavaScript

オプション無しの場合は、下記のスクリプトを記述するだけです。

<script type="text/javascript">
   $(function(){
      $().timelinr();
   });
</script>

スクリプトのオプション

オプションでは、レイアウトのタイプ（水平・垂直）、適用する要素、アニメーションのスピード、オートプレイの有無などを設定できます。

<script type="text/javascript"> 
   $(function(){
      $().timelinr({
         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: 500,
         // value: integer between 100 and 1000 (recommended), default to 500 (normal)
         issuesDiv : '#issues',
         // value: any HTML tag or #id, default to #issues
         issuesSelectedClass: 'selected',
         // value: any class, default to selected
         issuesSpeed: 200,
         // value: integer between 100 and 1000 (recommended), default to 200 (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)
      });
   });
</script>