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. jQuery Waterwheel Carousel

    JavaScript

    水平や垂直方向に配置できる水車のような便利なカルーセル「jQuery Waterwheel Caro…

    水平方向や垂直方向に配置できる水車のような便利なカルーセル「jQuer…

  2. Glide.js
  3. jQuery Magnify

    JavaScript

    シンプルで軽量なズーム機能を実装できる「jQuery Magnify」

    jQuery Magnifyはシンプルで軽量なズーム機能を実装すること…

  4. no-image

    JavaScript

    依存関係のないタグ付け機能を実装できる「taggle.js」

    taggle.jsは依存関係のないタグ付け機能を実装できるのが特徴です…

  5. Light-Zoom

    JavaScript

    CSSを使用した画像ズームを実装できるjQueryプラグイン「Light-Zoom」

    Light-Zoomは純粋なCSSを使用した画像ズーム(拡大)機能を実…

最近の記事

  1. 落ち葉と雪
  2. SOL001
  3. 末廣ラーメン

アーカイブ

PAGE TOP