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. AnimateScroll

    JavaScript

    面白いエフェクトのページ内スクロールを実装できるjQueryプラグイン「AnimateScroll」…

    ページの任意の場所にスクロールできるjQueryプラグイン「Anima…

  2. jExcel

    JavaScript

    Excelと互換性のあるスプレッドシートを埋め込めるjQueryプラグイン「jExcel」

    jExcelは、ブラウザにExcelと互換性のあるスプレッドシートを埋…

  3. JavaScript

    画像を素敵なアニメーションで次々に表示させるjQueryのイメージギャラリー「Heap Shot」

    とても素敵な画像の見せ方だったのでご紹介します。jQueryプラグイン…

  4. Priority Nav Scroller

    JavaScript

    水平スクロールができるナビゲーション「Priority Nav Scroller」

    Priority Nav Scrollerは水平スクロールを備えたナビ…

  5. fullPage.js

    JavaScript

    フルページでコンテンツごとにスクロールする「fullPage.js」

    fullPage.jsはフルページでコンテンツごとにスクロールするレス…

最近の記事

  1. 梅しば
  2. BM-IBCDH13RD
  3. 雪
  4. ホットのドリップ
  5. めんたいこ&チーズ味 海老せんべい

アーカイブ

PAGE TOP