2014/04/14

JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつける方法

今回のデモでは、シングルページでトップの画面が固定されて、その画像の上をコンテンツがパララックスするという形です。
DEMO

HTMLを記述

早速マークアップから。

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつける方法</title>

<style>
/*Styles 今回は、ここにCSSを記述します。*/
</style>

</head>
<body>

<div class="image">
<h2>JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつける方法</h2>
</div>

<section class="content">
<!--ここにコンテンツが入ります-->
</section>

</body>
</html>

<!DOCTYPE html>

<head>

<title>JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつける方法</title>

<style>

/*Styles 今回は、ここにCSSを記述します。*/

</style>

</head>

<body>

<h2>JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつける方法</h2>

</div>

</section>

</body>

</html>

CSSを記述

CSSもシンプルです。

body {
margin:0;
padding:0;
border:0;
}
.image {
background: url('images/tumblr_n381qgQRTS1st5lhmo1_1280.jpg') no-repeat fixed;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 500px;
}
h2 {
color: #fff;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 60px;
text-align:center;
font-weight: bold;
letter-spacing: -1px;
margin: 0 auto;
width: 800px;
position: fixed;
top: 30%;
left: 50%;
margin-top: -200px;
margin-left: -400px;
opacity:0.8;
}
.content {
width: 100%;
max-width: 750px;
margin: 0 auto;
box-sizing: border-box;
-moz-box-sizing: border-box;
position: relative;
z-index: 2;
background: #FFF;
width: 100%;
}
p {
font-family: Georgia, Times, "Times New Roman", serif;
font-size: 22px;
line-height: 40px;
margin: 30px 0;
}

body {

margin:0;

padding:0;

border:0;

}

.image {

background: url('images/tumblr_n381qgQRTS1st5lhmo1_1280.jpg') no-repeat fixed;

background-position: center center;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

min-height: 500px;

}

h2 {

color: #fff;

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

font-size: 60px;

text-align:center;

font-weight: bold;

letter-spacing: -1px;

margin: 0 auto;

width: 800px;

position: fixed;

top: 30%;

left: 50%;

margin-top: -200px;

margin-left: -400px;

opacity:0.8;

}

.content {

width: 100%;

max-width: 750px;

margin: 0 auto;

box-sizing: border-box;

-moz-box-sizing: border-box;

position: relative;

z-index: 2;

background: #FFF;

width: 100%;

}

p {

font-family: Georgia, Times, "Times New Roman", serif;

font-size: 22px;

line-height: 40px;

margin: 30px 0;

}

ポイントは、.image に、backgroundimageをセットして固定にします。
そして、高さをmin-heightに設定します。
これでスクロールエフェクトが得られます。
画像の上にテキストをセンター表示で載せていますが、これはマージンとfixedで実装しています。
詳しいテクニックはQuick CSS Trick: How To Center an Object Exactly In The Centerをどうぞ。
簡単ですね。

ここまでは、Super Simple Page Scrolling Effect Without JavaScript | Pencil Scoopを参考にしました。