『Vertical Timeline』を使ってみる。


アニメーションが良い!「Vertical Timeline」を使ってみる。

 

cssとjQueryで動きのあるタイムラインが実装できる「Vertical Timeline」をBootstrapサイトで使ってみる。

公式のDownloadボタンから必要ファイルをダウンロードしておきます。

Vertical Timeline
verticaltimeline

ダウンロードしたファイルとBootstrapのファイルを合わる、あとcssやjsのリンクを記述するくらいですかね・・

元からレスポンシブ対応なので、とくに難しいこともなく実装は出来ます。

デザインにもよるけど、少し手間のかかるのはライン上にあるアイコンを変更する場合。位置調整が必要・・・。

一応・・・今回少し弄ったサイトのデモはこちら

 

Vertical-Timeline使い方

 

VerticalTimelineのcss

縦に走るライン

  • #cd-timeline
  • #cd-timeline::before

年表の入るコンテンツ

  • .cd-timeline-content

ライン上のアイコン

  • .cd-timeline-img

 

 


この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL