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

関連記事

  1. JavaScript

    テキストの一部分をサラっとアニメーションさせるjQueryプラグイン「dynamo.js」

    テキストで指定した一部分をサラっとアニメーションさせるjQueryプラ…

  2. notifier

    JavaScript

    Webサイトにシンプルな通知を表示させるjQueryプラグイン「notifier」

    notifierはWebサイトにシンプルな通知を表示させることができる…

  3. EasyZoom

    JavaScript

    タッチ対応で画像拡大やパンもできるjQueryプラグイン「EasyZoom」

    EasyZoomはタッチにも対応したモバイルフレンドリーな、画像拡大や…

  4. simpleSlideShow

    JavaScript

    カスタマイズしやすいシンプル・軽量なスライドショー「simpleSlideShow」

    simpleSlideShowは、シンプルで軽量なスライドショーを実装…

  5. FlipClock.js

    JavaScript

    時計・タイマー・カウントダウンを実装できるjQueryプラグイン「FlipClock.js」

    FlipClock.jsというjQueryプラグインを使えば、時計・タ…

  6. Horizon Swiper

    JavaScript

    スワイプやスクロール対応の軽量なjQueryプラグイン「Horizon Swiper」

    Horizon Swiperはスワイプやブラウザスクロールに対応したj…

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP