Timeline.js

JavaScript

スライド式のタイムラインを実装できるjQueryプラグイン「Timeline.js」

Timeline.jsは、スライド式によるタイムラインを実装することができるjQueryプラグインです。マークアップもシンプルに記述できて、とても簡単に使えるのがいいですね。スライドしながら、じっくりタイムラインのコンテンツを見ることができます。

Timeline.js

デモ

デモページでは、デフォルトのタイプと年表の位置を上に表示したタイプの2つのサンプルが用意されています。

デフォルトのタイプでは、年表が下に表示されており、好きな年をクリックするとスライドでその年に応じたコンテンツへ移動します。横軸で表示された年表は、コンテンツがスライド移動するのに連動して動くようになっています。

コンテンツが表示される領域が広いので、テキストだけではなく画像も一緒に表示できるのがいいと思います。一つひとつじっくり見たいという人には、うれしい仕様といえそうです。

またもう一つのサンプル(Dots Position Top)では、オプションの設定により年表が上に表示されています。オプションの「dotsPosition」という項目の値に「top」を指定すると、このように上に表示できます。

Timeline.jsには他にもいろいろオプションが用意されています。主なオプションは、mode、itemClass、dotsClass、startItem、dotsPosition、activeClass、prevClass、nextClassです。

startItemでは、読み込んだ時に最初に表示させる場所を指定できます。Dots Position Topのサンプルでは「last」に設定されているので、読み込んだ時は1番最後のコンテンツが表示された状態になります。

ちなみに、「mode」には「horizontal」か「vertical」を指定できます。オプションを用いてカスタマイズして使いたい人にもピッタリです。

Timeline.js

関連記事

  1. stickUp
  2. Tilt.js

    JavaScript

    パララックスとチルトを兼ね備えたホバーエフェクト実装「Tilt.js」

    Tilt.jsはパララックスとチルトの動きを兼ね備えた滑らかなホバーエ…

  3. jQuery Notebook
  4. SweetAlert
  5. JavaScript

    スライドアニメーションが素敵なjQueryスライダー「Slideshow with jmpress.…

    とても素敵なスライドアニメーションを実装することができるjQueryス…

  6. Textillate.js

    JavaScript

    テキストに面白いCSS3アニメーションを加えることができるjQueryプラグイン「Textillat…

    指定したテキストに面白いCSS3アニメーションを加えることができるjQ…

最近の記事

  1. 梅しば
  2. BM-IBCDH13RD
  3. 雪
  4. ホットのドリップ
  5. めんたいこ&チーズ味 海老せんべい

アーカイブ

PAGE TOP