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
