Vertical Timeline

JavaScript

垂直型のシンプルなタイムラインを実装できるjQueryプラグイン「Vertical Timeline」

Vertical Timelineは、垂直型のシンプルなタイムラインを実装することができるjQueryプラグインです。レスポンシブに対応したタイムラインなので、PCだけではなくスマホやタブレットでも見やすいレイアウトで表示されます。

Vertical Timeline

デモ

デモではシンプルなタイムラインが垂直に設置されています。PC版では中央の縦軸をベースに、左右にコンテンツが表示された状態になっています。画面いっぱいを使用して表示するゆとりのあるタイムラインは、シンプルでとても見やすいですね。

さらにVertical Timelineはレスポンシブにも対応していることから、スマホからの閲覧もしやすいです。モバイル版では、左側の縦軸をベースにコンテンツが右側に表示されます。

また、デモの中にはコンテンツが表示される際にアニメーションを付与したタイプも用意されています。フェードで表示されるタイプやスライドで表示されるタイプがあるので、アニメーションとともにタイムラインをかっこよく表示したい人にもピッタリですね。

オプションには、startLeft、alternate、animate、arrowsといった項目があり、カスタマイズも可能になっています。使い方もわかりやすく手軽に実装できると思います。

というわけで、レスポンシブに対応したシンプルな垂直型のタイムラインを実装したい人は、ぜひ「Vertical Timeline」を活用されてみてはいかがでしょうか?

Vertical Timeline

関連記事

  1. EZ Tabs jQuery Plugin
  2. gridstack.js

    JavaScript

    ウィジェットレイアウトを作成できるjQueryプラグイン「gridstack.js」

    gridstack.jsはドラッグ&ドロップでウィジェットレイアウトを…

  3. JavaScript

    軽量で嬉しい!画像を拡大ズームしてくれるjQueryプラグイン「Leroy Zoom」

    Leroy ZoomというjQueryプラグインを使えば、画像を拡大ズ…

  4. BIDEO.JS

    JavaScript

    背景動画をフルスクリーンで表示させるJSライブラリ「BIDEO.JS」

    BIDEO.JSは、webページの背景にフルスクリーンで動画を表示させ…

  5. JavaScript

    フォーム内にあるplaceholderの利便性を高めてくれるjQueryプラグイン「FlowupLa…

    フォームを入力する際にあると便利なのがplaceholderです。しか…

  6. Light-Zoom

    JavaScript

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

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

最近の記事

  1. スタンスミス(EDIFICE/IENA別注)
  2. WI-1000XM2
  3. mill オイルヒーター
  4. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP