ITエンジニア/デザイナ向けにオープンソースを毎日紹介

情報を時系列に沿って表現する際には年表表示が便利です。教科書などでは横型の年表が使われますが、Webにおいては横スクロールは一般的ではないため、縦型のスクロールをしながら表示されることが多くなっています。

そんな縦型年表を容易に作成できるのがVertical Timelineになります。

Vertical Timelineの使い方

デフォルトの表示です。

日付を表示するデモ。

開始を右側からに。

左寄せ。吹き出しなし。

レスポンシブデザインも対応しています。

Vertical Timelineを使えばサービスの遍歴など、過去の歴史を振り返るような表示が簡単に作れるようになります。普段から使うようなデザインではないので、メモリアル的な部分に用いると良さそうです。

Vertical TimelineはjQuery/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

Vertical Timeline

Timeline - A responsive, jQuery-based timeline generator

RyanFitzgerald/vertical-timeline: Responsive, jQuery-based vertical timeline generator

 

MOONGIFTの関連記事

  • DevRel
  • Com2