Timeline

JavaScript

水平・垂直に対応したVanilla JSによるタイムライン実装「Timeline」

Timelineは水平・垂直に対応したVanilla JSを使ったタイムラインを実装できます。レスポンシブにも対応しているのでモバイルからの閲覧もバッチリですね。自サイトのレイアウトなどに合わせて水平か垂直のどちらかを選べるのはとても便利です。

Timeline

デモ

デモでは水平と垂直の両方のタイムラインが用意されています。水平のタイムラインでは、PCからの閲覧の場合、左右の矢印ボタンが設置されていて、ここから前後に移動することが可能です。

スマホのように画面幅が狭くなると、縦にタイムラインが一列で並んだレイアウトに変化します。レスポンシブ対応により、PC・モバイルともにそのデバイスに最適なカタチで表示されるのがいいですね。

ちなみに水平・垂直の設定は、オプションの「mode」から指定することができます。デフォルト値はverticalです。水平にしたい場合はここの値をhorizontalに指定すればOKです。

オプションには他にも、forceVerticalMode、horizontalStartPosition、moveItems、startIndex、verticalStartPosition、verticalTrigger、visibleItemsといった項目が用意されています。

マークアップもシンプルで記述しやすく、ファイルサイズも小さいのでモバイルにもピッタリですね。というわけで、水平・垂直に対応したレスポンシブなタイムラインを実装できる「Timeline」の紹介でした。

Timeline

関連記事

  1. CardTabs

    JavaScript

    ミニマルで超軽量・シンプルなタブを実装できるjQueryプラグイン「CardTabs」

    CardTabsは超軽量でシンプルなタブを実装できるjQueryプラグ…

  2. jQuery gantt

    JavaScript

    軽量なガントチャートを実装できるjQueryプラグイン「jQuery gantt」

    jQuery ganttは、軽量でシンプルなガントチャートを実装するこ…

  3. Slinky.js

    JavaScript

    上下にスクロールでコンテンツが開閉するjQueryプラグイン「Slinky.js」

    なかなか面白かったのでご紹介します。上下にスクロールするとコンテンツが…

  4. OverlayScrollbars
  5. Image Lightbox

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP