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

    JavaScript

    設定した高さに基づいて複数行のテキストを切り取る「Shave」

    Shaveは設定した最大の高さに基づいてHTML要素内に収まるように複…

  2. ptrLight

    JavaScript

    モバイル用のリフレッシュインジケーターを実装できる「ptrLight」

    ptrLightはモバイル用のリフレッシュインジケーターを実装すること…

  3. Sticker.js

    JavaScript

    ペラッとめくるようなエフェクトが素敵なJSライブラリ「Sticker.js」

    画像や要素をペラッとめくるようなエフェクトを実装できるJSライブラリ「…

  4. imgViewer2

    JavaScript

    画像のズームとパン機能を備えたjQueryプラグイン「imgViewer2」

    imgViewer2は画像のズームとパン機能を備えたjQueryプラグ…

  5. JavaScript

    とても簡単にカッコいいタグクラウドを実装することができるjQueryプラグイン「jQCloud」

    とってもカッコいいタグクラウドを実装することができるjQueryプラグ…

  6. Lazy Load

    JavaScript

    画像の読み込みを遅らせてスクロールに合わせて表示させるjQueryプラグイン「Lazy Load」

    画像の読み込みを遅らせて表示させることができるjQueryプラグイン「…

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP