ページトップへ

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%とかにすると、最初からちらっと次のボックスが見えるようにできます。
2015年01月22日

お問い合わせ

※ご依頼の際にはご予算/納期/使用用途を記載していただけるとスムーズに対応が可能です。
※都内近郊であれば直接のお打ち合わせも可能です。希望される際はその旨をご連絡ください。

※作成した作品の著作権譲渡はいたしておりません。
(著作権譲渡の必要がある場合はご依頼時にご相談ください)
※制作実績としてサイトやSNSにて公開させていただくことがございます。(公開NGの場合はご依頼時にご連絡ください)
※イラストの修正については別途費用が発生する場合がございます。
(ラフ段階は基本無償ですが回数や内容によっては費用が発生する場合がございます。また、着色後は基本費用が発生いたします)

お名前 (必須)

メールアドレス (必須)

メッセージ本文(必須)

自動返信メールが送信されます。
返信メールが届いていない場合は正しく送信できていない可能性がございます。