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. Custom jQuery Lightbox

    JavaScript

    デザインや使い方がシンプルな「Custom jQuery Lightbox」

    Custom jQuery Lightboxはデザインや使い方がシンプ…

  2. jQuery liMarquee
  3. notie.js

    JavaScript

    クリーンでシンプルな通知を表示できる「notie.js」

    notie.jsはクリーンでシンプルな通知を表示できるJSプラグインで…

  4. JavaScript

    JavaScriptでセレクトボックスから項目を選択したらリンク先にジャンプさせるやり方

    ちょっとした備忘録です。よく見るセレクトボックスから各項目を選択するだ…

  5. ScrollTrigger

    JavaScript

    スクロールの位置をベースにしたアニメーション「ScrollTrigger」

    ScrollTriggerはユーザーがスクロールする位置をベースにした…

  6. JavaScript

    クリックで画像や要素にオーバーレイを表示させるjQueryプラグイン「Purplecoat.js」

    Purplecoat.jsはクリックすると画像や好きな要素にオーバーレ…

最近の記事

  1. mill オイルヒーター
  2. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP