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

Scroll To Top Then Fixed Navigation Effect With jQuery and CSSスクロールすると上部にナビゲーションが固定される「Scroll To Top Then Fixed Navigation Effect With jQuery and CSS」前のページ

未来的なデータピッカーを実装できる「jquery.datepicker」次のページjquery.datepicker

関連記事

  1. Unite Gallery

    JavaScript

    レスポンシブな画像・動画ギャラリーを実装できる「Unite Gallery」

    Unite Galleryは、レスポンシブに対応した画像・動画ギャラリ…

  2. Wallpaper

    JavaScript

    背景画像のレイアウトをブラウザ幅に合わせてくれるjQueryプラグイン「Wallpaper」

    WallpaperというjQueryプラグインを使えば背景画像のレイア…

  3. iziModal

    JavaScript

    エレガント・レスポンシブ・フレキシブルでそのうえ軽量なモーダルウィンドウ「iziModal」

    iziModalはエレガント・レスポンシブ・フレキシブルなモーダルウィ…

  4. Fancy Input

    JavaScript

    かっこいいエフェクトのテキスト入力を実装できる「Fancy Input」

    Fancy Inputは、かっこいいエフェクトを備えたテキスト入力を実…

  5. Expanding Bar Navigation Concept

最近の記事

  1. クッキー&クリーム ポップコーン
  2. マウイチップス マウイオニオン味
  3. グリーンビーントゥーバー
  4. VS-543AS

アーカイブ

PAGE TOP