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. Slinky.js

    JavaScript

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

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

  2. Jquery progress indicator on page scroll
  3. no-image

    JavaScript

    水平・垂直に対応したカルーセルスライドショー「jCarousel」

    jCarouselは水平・垂直に対応したカルーセルスライドショーを実装…

  4. jQuery Star Flashing Effect
  5. Responsive Sidebar Navigation
  6. Custom jQuery Lightbox

    JavaScript

    デザインや使い方がシンプルな「Custom jQuery Lightbox」

    Custom jQuery Lightboxはデザインや使い方がシンプ…

最近の記事

  1. パーソナルパーティション
  2. 200-DGBG020
  3. Anker PowerPort 5-in-1 37.5W Hub

アーカイブ

PAGE TOP