Timeliny

JavaScript

レスポンシブ対応の年ベースによるjQueryタイムライン「Timeliny」

Timelinyはレスポンシブに対応した年ベースによるタイムラインを実装できるjQueryプラグインです。とてもシンプルで見やすく、ドラッグ&ドロップで目的の年に簡単にフォーカスできます。

Timeliny

デモ

デモでは年間のタイムラインが水平に並べられています。現在フォーカスされている年はピンク色で分かりやすく表示されます。また、年の下にはショートテキストを表示させることも可能です。

操作は左右にドラッグ&ドロップすることで好きな年にもっていくことができます。デザイン・操作ともにシンプルで無駄がなく、とても見やすいタイムラインです。

使い方に関してもとても簡単なので、手軽に実装できます。オプションには、order、className、wrapper、boundaries、animationSpeed、hideBlankYearsが用意されています。デフォルト値は、orderがasc、classNameがtimeliny、boundariesが2、animationSpeedが250、hideBlankYearsがfalseです。

<div class="timeliny-wrapper"></div>

そのほか、コールバック関数やメソッドもいろいろ用意されているので、気になる人はぜひチェックしてみてください。

Timeliny

jQuery Section Navi Pluginセクション単位でアップダウンできる「jQuery Section Navi Plugin」前のページ

Google画像のようなアコーディオンプラグイン「MG Space」次のページMG Space

関連記事

  1. Adi.js

    JavaScript

    アドブロックを検知してくれる「Adi.js」

    Adi.jsはアドブロックを検知してくれるjQueryプラグインです。…

  2. stickyTableColumns

    JavaScript

    水平(左右)にスライドできるテーブル実装「stickyTableColumns」

    stickyTableColumnsは、データ量の多い表をページで表現…

  3. simplePagination.js
  4. baffle.js

    JavaScript

    DOM要素内のテキストを難読化させて読めるようにする「baffle.js」

    baffle.jsは、DOM要素内のテキストを暗号化して難読化させ、さ…

  5. spzoom

    JavaScript

    シンプルで使いやすい画像ズームを実装できるjQueryプラグイン「spzoom」

    spzoomはシンプルな操作性で使いやすい画像ズーム機能を実装できるj…

  6. no-image

    JavaScript

    ミニマルなイメージギャラリーを実装できる「Albery」

    Alberyはミニマルなイメージギャラリーを実装できるjQueryプラ…

最近の記事

  1. ゴムの耳栓
  2. ライオンコーヒー(バニラマカダミア)
PAGE TOP