Building a Vertical Timeline With CSS and a Touch of JavaScript

JavaScript

レスポンシブに対応した垂直タイムライン「Building a Vertical Timeline With CSS and a Touch of JavaScript」

Building a Vertical Timeline With CSS and a Touch of JavaScriptは、レスポンシブに対応した垂直型のタイムラインを実装することができます。アニメーション付きでスクロールしていく度にタイムラインが次々に表示されていきます。

Building a Vertical Timeline With CSS and a Touch of JavaScript

デモ

デモでは垂直型のタイムラインが設置されていて、下へスクロールしていくと、左右から次々とタイムラインがアニメーション付きで表示されます。シンプルでとても見やすいタイムラインです。

また、Building a Vertical Timeline With CSS and a Touch of JavaScriptはレスポンシブにも対応しているため、ブラウザ幅を縮小するとそれに合わせてタイムラインのレイアウトも変化します。

PC版では中央の縦軸を基準に左右にアイテムが表示されますが、モバイル版では右表示のみで統一されます。

モバイルでも見やすいタイムラインを実装できるので、パソコンだけではなくスマホやタブレットからでも快適に見れるタイムラインを設置したい人にはピッタリですね。

会社の沿革ページや個人のプロフィールページなどで、いろんなデバイスからでも閲覧しやすいタイムラインを実装したいという人は、ぜひBuilding a Vertical Timeline With CSS and a Touch of JavaScriptを参考にしてみてはいかがですか?

Building a Vertical Timeline With CSS and a Touch of JavaScript

関連記事

  1. jQuery Floating Social Share
  2. t-scroll

    JavaScript

    アニメーションとともにアイテムが一つずつ現れる「t-scroll」

    t-scrollはアニメーションとともにアイテムを一つずつ表示させるこ…

  3. Solution for Long Drop Down Items

    JavaScript

    長いメニューもスクロールで表示できる「Solution for Long Drop Down Ite…

    長いドロップダウンメニューでもスクロール表示してくれるjQueryを活…

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

    JavaScript

    jQueryのfocusとblurを使えばフォームが便利になる

    jQueryのfocusとblurを使えばフォームを便利にすることがで…

  5. Simple Sidebar
  6. no-image

最近の記事

  1. Dyson Pure Cool Me
  2. ルック セレクション
  3. シルキーウインドモバイル
  4. アリエール パワージェルボール3D

アーカイブ

PAGE TOP