Vertical Timeline

JavaScript

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

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

Vertical Timeline

デモ

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

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

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

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

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

Vertical Timeline

SmartPhoto.jsレスポンシブなイメージビューアを実装できる「SmartPhoto.js」前のページ

豊富なアニメーションを有するハンバーガーメニュー「Ember Burger Menu」次のページEmber Burger Menu

関連記事

  1. radialIndicator

    JavaScript

    シンプルな円形のインジケーターを実装できるjQueryプラグイン「radialIndicator」

    radialIndicatorはシンプルで美しい円形のインジケーターを…

  2. Valiant 360

    JavaScript

    360度のパノラマ動画を実装できるビデオプレーヤー「Valiant 360」

    Valiant 360はブラウザ上で360度のパノラマ動画・写真を実装…

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

    JavaScript

    jQueryのeachと$.eachの簡単な使い方のメモ

    jQueryのeachと$.eachの使い方のメモです。あんまり深い知…

  4. 10のjQueryスニペット

    JavaScript

    Webデザイナーが知っておくべき10のjQueryスニペット

    すべてのWebデザイナーが知っておくべき10のjQueryスニペットが…

  5. Responsive Nav

    JavaScript

    レスポンシブ対応の軽量なナビゲーションを実装できる「Responsive Nav」

    レスポンシブ対応のナビゲーションを実装できる「Responsive N…

最近の記事

  1. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ
  2. ペットボトルホルスター

アーカイブ

PAGE TOP