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

no-imageフォームに文字制限を設定できるjQueryプラグイン「Character Limit」前のページ

ステップ式のウィザードを実装できるjQueryプラグイン「jquery-steps」次のページjquery-steps

関連記事

  1. Multi-Level Accordion Menu
  2. Ideal Image Slider

    JavaScript

    シンプルで動きが滑らかなスライダー「Ideal Image Slider」

    Ideal Image Sliderはレスポンシブに対応したシンプルで…

  3. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryの基本的なanimateメソッドを使って適当に遊んでみる

    jQueryのanimateメソッドを使えば自分で好きなようにアニメー…

  4. Fluidbox

    JavaScript

    シンプルで軽快な動作が素敵なLightbox風のjQueryプラグイン「Fluidbox」

    FluidboxというjQueryプラグインを使えば、シンプルで軽快な…

  5. iziToast

    JavaScript

    エレガントでレスポンシブに対応したトーストを実装できる「iziToast」

    iziToastは、エレガントでレスポンシブに対応した軽量のトーストを…

  6. Tippy.js

    JavaScript

    軽量ながらも多彩なツールチップを実装できるJSライブラリ「Tippy.js」

    Tippy.jsは軽量でありながらも多彩なツールチップを実装することが…

最近の記事

  1. TR153
  2. cheero Flat 10000mAh with Power Delivery 18W CHE-112
  3. SV-S251
  4. スラウェシ トラジャ

アーカイブ

PAGE TOP