HTMLとCSSのみでパララックス風ページを作る

まだまだ根強いパララックスページ。
jQueryのプラグインを駆使すれば、割と簡単に作成することができますが、
もっと簡単に、それっぽく見えればいいという方向けに、HTMLとCSSのみで実装してみました。

以下ソース。
まずはCSS。

@charset "utf-8";

/* HTMLとBODYのマージン、パディングを0にして高さを100％にしておく */
/* reset */
html
,body {
	margin:0px;
	padding:0px;
	height:100%;
}

/* 大枠となるクラス */
.wrapper {
	height:100%;									/* 高さ100% */
	background:fixed 50% no-repeat;					/* 背景指定。50%の位置に固定表示してリピートなし */
	background-size:cover;							/* ブラウザのサイズに画像サイズを合わせる */
	position:relative;								/* ポジション指定（日付を指定位置に表示するため）*/
}


/* 以下、ボックス指定。背景画像を変えるだけの指定____________________________ */
.first {
	background-image:url('../img/free/a.jpg');
}

.second {
	background-image:url('../img/free/b.jpg');
}

.third {
	background-image:url('../img/free/c.jpg');
}

.fourth {
	background-image:url('../img/free/d.jpg');
}

.fifth {
	background-image:url('../img/free/e.jpg');
}

.sixth {
	background-image:url('../img/free/f.jpg');
}

.seventh {
	background-image:url('../img/free/g.jpg');
}
/* ___________________________________________________________________________*/


/* 日付表示用 ________________________________________________________________*/
.day {
	position:absolute;						/* ポジション指定 */
	top:10%;
	left:10%;
	width:100px;
	height:100px;
	background-color:rgba(0,0,0,0.4);		/* 背景黒で、背景色のみ40%透過指定 */
	color:#ffffff;
	font-size:60px;
	border-radius: 50%; 					/* 角丸50%に指定することで円表示 */
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%; 
	display:table;							/* 文字を上下左右センターにするため、テーブルにする */
}

.day span {
	display:table-cell;						/* テーブルセル */
	width:100%;
	text-align:center;
	vertical-align:middle;
}
/* ___________________________________________________________________________*/

続いてHTML。

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="UTF-8">
	<link type="text/css" href="./css/style.css" rel="stylesheet" />
</head>
<body>
	<!-- 1つめ -->
	<div class="wrapper top first">
		<div class="day">
			<span>
				日
			</span>
		</div>
	</div>
	
	<!-- 2つ目 -->
	<div class="wrapper second">
		<div class="day">
			<span>
				月
			</span>
		</div>
	</div>
	
	<!-- 3つめ -->
	<div class="wrapper third">
		<div class="day">
			<span>
				火
			</span>
		</div>
	</div>
	
	<!-- 4つめ -->
	<div class="wrapper fourth">
		<div class="day">
			<span>
				水
			</span>
		</div>
	</div>
	
	<!-- 5つめ -->
	<div class="wrapper fifth">
		<div class="day">
			<span>
				木
			</span>
		</div>
	</div>
	
	<!-- 6つめ -->
	<div class="wrapper sixth">
		<div class="day">
			<span>
				金
			</span>
		</div>
	</div>
	
	<!-- 7つめ -->
	<div class="wrapper seventh">
		<div class="day">
			<span>
				土
			</span>
		</div>
	</div>


</body>
</html>

とりあえず1週間のレシピっぽく表示してみました。
ボックスの数を増やしたり減らしたりしてもいいし、
cssのwrapperの高さを90%とかにすると、最初からちらっと次のボックスが見えるようにできます。