『Vertical Timeline』の使い方　タイムライン表示で旅の過ごし方コンテンツを作りました

f:id:syofuso:20170216154418p:plain
Vertical TimelineはCSS3とjQuryで表現された縦のタイムラインで時系列にコンテンツを作るためのライブラリです。レスポンシブ対応でシンプルミニマルなデザインでアニメーション付きのタイムライン表現が実装できます。これはフラットデザインというよりマテリアルデザインに近いのでしょうか。
スクロールするとコンテンツが左右からフェードインされるアニメーションが印象的です。
DEMO:Responsive Vertical Timeline

Vertical Timelineの使い方

Vertical　Timelineの使い方は簡単です。公式サイトよりzipファイルをダウンロードし、中のindex.htmlをそのまま改変して使うか、sectionタグで囲まれた部分をコピペして使用します。
head内にCSSとJavascriptの読み込みリンクを記述するのを忘れないで下さい。（CSSとJSのファイルへのパスに注意）

<head>
~
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
</head>

scriptはフッターに記述しても良いと思います。

Vertical TimelineのHTML構造

<section id="cd-timeline">
	<div class="cd-timeline-block">
		<div class="cd-timeline-img">
                        <!-- 中央の丸アイコン -->
			<img src="img/cd-icon-picture.svg" alt="Picture">
		</div> <!-- cd-timeline-img -->
 
		<div class="cd-timeline-content">
			<h2>コンテンツ1</h2>
			<p>ここにコンテンツを記述</p>
			<a href="#0" class="cd-read-more">Read more</a>
			<span class="cd-date">時刻1</span>
		</div> <!-- cd-timeline-content -->
	</div> <!-- cd-timeline-block -->
 
	<div class="cd-timeline-block">
		<!-- ... -->
	</div>
</section>

タイムラインのHTMLの構造は上記のようになっています。.cd-timeline-blockで一つのブロックとなり、.cd-timeline-contentの中にコンテンツを記述すればOKです。
コンテンツは奇数偶数で順に左右にfloatされます。CSSの擬似クラス:nth-child(even) で偶数番目のブロックを右floatにしていますね。

@media only screen and (min-width: 1170px) {
.cd-timeline-block:nth-child(even) .cd-timeline-content {
    float: right; /* 偶数番目の指定 */
  }
}

Vertical Timelineをカスタマイズ　旅の過ごし方ページを作る

管理している宿施設の公式サイトに時系列で旅の予定を提案する［旅の過ごし方」ページを作りました。過ごし方は旅館のサイトではメジャーでよく見かけるコンテンツですが大抵は画像で表現されているようです。CSSでタイムライン表示を作りたかったので、今回このライブラリを使用しました。
f:id:syofuso:20170216052202p:plain
このような感じにカスタマイズしました。

DEMOと全然レイアウト違うやんけ、意味あるの？と思われるかもしれません（笑）
左右にfloatすると余白スペースが気になるので途中で予定変更し、魔改造しました。
タイムライン表示するライブラリは他にもたくさんあるので作りたいコンテンツに合うものをいろいろ探してみてください。
www.nxworld.net