Vertical Timeline

JavaScript

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

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

Vertical Timeline

デモ

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

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

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

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

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

Vertical Timeline

関連記事

  1. no-image

    JavaScript

    ウィークデイ(週)のオプションを作成できる「jquery-weekdays」

    jquery-weekdaysはウィークデイ(週)のオプションを作成で…

  2. no-image

    JavaScript

    ダイナミックな自動スライドショーを実装できる「CSS + jQuery Gallery」

    CSS + jQuery Galleryはダイナミックでかっこいい自動…

  3. Tabulous.js

    JavaScript

    色々なエフェクトのタブパネルが実装できるjQueryプラグイン「Tabulous.js」

    素敵なタブパネルがあったのでメモがてらご紹介します。オプションを指定す…

  4. Rebox

    JavaScript

    レスポンシブ対応の軽量なLightbox風jQueryプラグイン「Rebox」

    ReboxというjQueryプラグインを使えば、レスポンシブに対応した…

  5. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでパターン化されたクラス名をループで1つずつ取り出して処理する

    どうでもいい内容なんですがちょっとやりたかったのでメモです。jQuer…

  6. JK Responsive Youtube Video and Image Gallery

最近の記事

  1. M360bt

アーカイブ

PAGE TOP