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. Ziehharmonika

    JavaScript

    かっこいいアコーディオンを実装できる軽量のjQueryプラグイン「Ziehharmonika」

    アニメーションがとてもクールでかっこいいアコーディオンを実装することが…

  2. no-image

    JavaScript

    スタイリッシュなスライダーを実装できるjQueryプラグイン「bsc-slider」

    bsc-sliderは、シンプルでスタイリッシュなスライダーを実装する…

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

    JavaScript

    jQueryで$.inArrayを使えば配列の中に指定した値が何番目に入ってるか知ることができる

    jQueryで配列の中に自分が指定した値が何番目にあるか知りたい場合は…

  4. timedropper

    JavaScript

    時刻を指定しやすくしてくれるjQueryのタイムピッカー「timedropper」

    timedropperは時刻の指定をしやすいUIを実装できるjQuer…

  5. Houdini

    JavaScript

    シンプルな折りたたみ・展開やアコーディオンを実装できる「Houdini」

    Houdiniはシンプルな折りたたみ・展開ができる機能やアコーディオン…

  6. Starfield

    JavaScript

    宇宙空間を移動するような背景アニメーションを実装できる「Starfield」

    Starfieldは宇宙空間を移動するような背景アニメーションを実装す…

最近の記事

  1. M360bt
  2. BQ-CASE/1
  3. GLOO BOX

アーカイブ

PAGE TOP