年表や沿革など タイムラインが簡単に実装できる便利なライブラリ

タイムラインは年表や沿革などでよく使われているのを見かけますが、フローとしても取り入れると非常にわかりやすいです。

PC表示で見やすいようにコーディングしても、スマホはどうやって表示させようと考えるのが大変だったりします。

そんな時に今回紹介するようなライブラリやフレームワークがあればタイムラインのベースはできているので、デザインに合わせてカスタマイズしていくことで簡単に実装することができます。

Vertical Timeline

デモを見ると分かるのですが、アニメーションもついています。左右からコンテンツが表示されるような形のタイムラインです。

また、スマホ版の表示も見やすいです。公式サイトではカスタマイズの方法も詳しく紹介されているので、とにかく簡単にタイムラインを実装したいときにおすすめです。

B1nj Timeline

凝ったデザインのものではなく、シンプルなタイムラインを導入したいときにおすすめなのが「B1nj Timeline」です。

見た目はシンプルですが、コンテンツ自体をアコーディオンで開閉することもできます。

CSS3 Timeline

CSSのみを使って作られたタイムラインです。

タイトルをクリックすると吹き出しが表示され、詳細が見られるような形になっています。

コンテンツ量が多くても、すっきり見やすいタイムラインが実装できます。

Timeline Created With CSS Grid

CSSグリッドで作成されたタイムラインです。

スマホ表示になった時も見やすいし、コンテンツの追加も簡単に出来るのが良いなと思いました。

Scroll Timeline

左側の年数を押すとそれに合わせて右側のコンテンツが変化していきます。

また、クリックだけでなく、スクロールでも年数の部分の色が変化していきます。

企業の沿革などにぴったりのデザインだと思います。

timeline

時系列とともに背景画像も変化しています。

一般的なタイムラインとデザインに差をつけたい時におすすめです。

Flexbox Timeline Layout

Flexboxを使って作られたタイムラインです。

最初から写真を入れるスペースまで作られているので、色などを好みのものに変えていけばすぐに使えそうです。

Narrow Vertical Timelinr

左側の年数を押すと、右側のコンテンツが切り替わるタイプのタイムラインで、上下の矢印アイコンでも前後に移動できます。

Responsive Vertical Timeline

CSSのみで実装されているので、カスタマイズも容易で割と短時間でデザイン通りに組み込むことが出来ます。

また、左右にコンテンツが入っていますが、片方だけ入れられることもできるので柔軟性が高くなっています。

Responsive HTML Timeline

非常にシンプルなタイムラインでCSSだけで実装されているので、カスタマイズ性も抜群です。

レスポンシブにも対応しています。

Responsive slider timeline with Swiper

年数もしくは矢印アイコンを押すとフル画面で変動していくタイプのタイムラインです。

デザイン性を出したいときや、タイムラインをメインに打ち出したい時などにおすすめです。

comments & feeadbacks & history timeline

チャット風になっているタイプのタイムラインです。

更新履歴やお知らせなどでも使えそうです。

Timeline scribble

一見シンプルですが、スクロールで可視範囲に入ると◆の部分が動いたり、年数の部分の背景色が変わったりとアニメーションも入っているタイプのタイムラインです。

responsive timeline v3

こちらは水平タイプのタイムラインです。

●部分をクリックするとそれに沿って下の内容が切り替わるようになっています。

Building a Horizontal Timeline With CSS and JavaScript

こちらも水平タイプのタイムラインですが、上下にコンテンツを入れられることが出来ます。

また、下部の矢印を押すことでスクロールされていき、年表が新しい方へ移動していきます。

4 Panel Timeline CSS

パネルを使ったおしゃれなタイムラインです。

マウスオンした年数の背景画像が鮮明になり、コンテンツが表示されます。

他のタイムラインと差をつけたいときやデザイン性を求めたい時に使えそうです。