背景画像が固定されたアレ！パララックスデザインの作り方

企業や商品のサイトを見ているとたまに目にする、背景画像は固定されていて、その上をページがスクロールしているようなページ。あれは「パララックスデザイン」というそうです。

コーダーとかやってたらぜひ使ってみたいなーなんて思っていましたが、そんな機会もないので一度調べて作ってみようと思ったので記事にしてみました。

サンプル

まずは以下がサンプルとなります。あくまで説明用でかなり適当に作ったものなのであしからず。

html

分かりやすいように簡素なものにしています。


<body>

<div class="block block1">header</div>

<div class="block block2"><--好きな文章を入れてください-->
The parallax design is cool and appeals to the viewer's eyesight.
It can be expected that special effects will be obtained by introducing parallax design on the website.<br>
The parallax design is cool and appeals to the viewer's eyesight.
It can be expected that special effects will be obtained by introducing parallax design on the website.
<div>

<div class="block block3">
このように透過させてもスタイリッシュな感じでかっこいいですね。
<div>

<div class="block block4">footer</div>

<body>

誤ったcss

パララックスデザインのWEBページの作り方を調べたときに、多くのページで"background-attachment:fixed;"を使えばOKという記述がありました。

background-attachmentとは

background-attachmentプロパティは、画面をスクロールする際、背景画像をその位置に固定されたままにするか、スクロールに伴って移動するかどうかを指定します。

■値

fixed

背景画像の位置が固定され、スクロールしても動かなくなります。

scroll

スクロールに伴って、背景画像も移動します。

いくつかの記事をみて作成したのがcssが以下コードです。

このままやってもうまくいかないので注意してください！


body{
display:block;
background-image:url(img001.jpg); /*背景画像*/
background-attachment: fixed; /*背景画像を固定*/
background-repeat:no-repeat; /*背景画像リピートしない*/
background-size:cover; /*背景画像を画面サイズいっぱいに表示*/
background-position:center top; /*背景画像の開始位置*/
width:100%; /*横幅いっぱいに*/
}

.block{ /*block共通設定*/
display:block;
background:#fff;
height:100%; /*各ブロックを内包いっぱいの高さに*/
}

.block1{
height:50px; /*ヘッダーの高さ*/
text-align:center;
}

.block2{
margin-top:400px;
padding:100px 10px;
}

.block3{
margin-top:400px;
padding:100px 10px;
background:rgba(0,0,0,0.4); /*透過させる*/
color:#fff; /*文字の色*/
}

.block4{
height:50px; /*フッターの高さ*/
margin-top:400px;
text-align:center;
}

@media screen and (max-width:768px){
.block1{
height:50px;
}

.block2{
margin-top:400px;
padding:20px 10px;

}

.block3{
margin-top:300px;
padding:100px 10px;
}

.block4{
height:50px;
margin-top:400px;
}
}

それでは上記cssで作成した結果を確認してみましょう。以下はiPhoneで表示されるページ失敗サンプルです。

背景画像まで一緒にスクロールしているのが分かると思います。原因を調べて見ると、ios（iPhone等SafariのOS）でbackground-attachment: fixed;と、background-size:cover;を同時に使用するとうまく機能しないということが分かりました。これはiosの不具合のようで、W3Cからも正式に不具合として報告があるようです。

レスポンシブに画面いっぱいに表示させるにはbackground-size:cover;が外せないため、実質この2つを同時に使うのは不可能ということになります。

PCやAndroid端末などで閲覧するとうまくいきますが、iPhone等Apple製品で閲覧すると狙い通りに表示されません。

iPhoneの普及率を考えれば無視するわけにもいきませんので、他の方法を探してみました。

その方法が疑似要素"before"を使った、以下コードとなります。


/*疑似要素でbody全体に画像を配置*/
body:before{
content:""; /*中身はブランク*/
display:block;
background-image:url(img001.jpg); /*背景画像*/
background-repeat:no-repeat; /*画像を繰り返さない*/
background-size:cover; /*画面サイズいっぱいに表示*/
background-position:center top;
width:100%; /*横幅いっぱいに表示*/
height:100vh; /*立幅いっぱいに表示*/
position:fixed; /*固定*/
z-index:-1; /*全ての要素より順位を下げる*/
}

.block{
display:block;
background:#fff;
height:100%;
}

.block1{
height:50px;
text-align:center;
}

.block2{
margin-top:400px;
padding:100px 10px;
}

.block3{
margin-top:400px;
padding:100px 10px;
background:rgba(0,0,0,0.4);
color:#fff;
}

.block4{
height:50px;
margin-top:400px;
text-align:center;
}

@media screen and (max-width:768px){
.block1{
height:50px;
}

.block2{
margin-top:400px;
padding:20px 10px;

}

.block3{
margin-top:300px;
padding:100px 10px;
}

.block4{
height:50px;
margin-top:400px;
}
}

上記cssで作成した成功例を改めてどうぞ（しつこいけど）

以上、パララックスデザインページの作り方をご紹介しました。情報発信サイトやブログをやっていてもあまり使う機会はないので自己満ですが、意外に簡単でかなり楽しいので一度チャレンジをおすすめします。

背景画像と全面画像のスクロールスピードを変化するやり方もあるようなのですが、それはまたいつか追記できればと思います。

EnjomonWeb

背景画像が固定されたアレ！パララックスデザインの作り方

サンプル

html

誤ったcss