実装が面倒なタイムラインコンテンツを簡単に実装できるスタイルシート -Timelined

垂直に伸びた時間軸にポイントを配置し、そのポイントにコンテンツを紐付かせるタイムラインを簡単に実装できるスタイルシートを紹介します。

サイトのキャプチャ

Timelined
Timelined -GitHub

Timelinedのデモ

デモでは軸の位置、ポイントやコンテンツにさまざまなデザインが適用されており、カスタマイズ機能も備えています。

デモのキャプチャ

デモページ

タイムラインはレスポンシブ対応で、表示サイズに最適なデザインで表示されます。

デモのキャプチャ

AngularJSを使用したダイナミックなデモも。

デモのキャプチャ

Dynamic Demo

Timelinedの使い方

Step 1: 外部ファイル

当スタイルシートを外部ファイルとして記述します。

Step 2: HTML

まずは基本構造。

主要素のコンテナ「.timeline」にclassを加えることで、簡単にカスタマイズができます。

.timeline-left
コンテンツを常に右に配置し、ラインを左にします。
.timeline-alternating
ブロックがラインの左と右の交互に繰り返されます。
.timeline-collapsing
コンテナの表示サイズが小さい時(初期値: 800px)に、「.timeline-left」に変わります。
.timeline-with-arrows
ラインに向かってアローが表示されます。
.timeline-icon-hide-border
アイコンのサークルからボーダーを除去します。

top of page

©2016 coliss