[CSS]JavaScript無し、レスポンシブ対応、背景をコンテンツのスクロールに合わせて変更するスタイルシート
Post on:2012年11月13日
sponsorsr
背景画像を表示サイズに合わせていっぱいに表示し、コンテンツのスクロールに合わせカーテンがめくれるように背景画像を変更するスタイルシートのチュートリアルを紹介します。
eBayで使用されているエフェクトです。
How to recreate the new e-bay site scrolling effect
デモ
デモは疑似要素を使用しているので、全てのモダンブラウザ、IE8+でご覧ください。
スクロールすると、カーテンを引き上げるように背景画像が表示されます。
次のコンテンツになると、別の背景画像が表示されます。
実装はレスポンシブ対応なので、表示サイズを変更してもOKです。
デモを幅1,500pxで表示
デモを幅780pxで表示
実装
実装は、5ステップです。
Step 1: 背景画像の用意
デモでは4つのコンテンツがあるので、3枚の背景画像を用意しています。一番大きい表示サイズを想定して、1,800x1,200pxの画像です。
Step 2: HTML
HTMLは非常にシンプルです。
4つの各コンテンツはrapperのclassを付与したdiv要素で配置し、header, section, section, footerで内包します。
<!DOCTYPE html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <title>From love for lavender</title> ... </head> <body> <header class=" content"> <div class="wrapper"> <!-- ヘッダ 1つ目のコンテンツ --> </div> </header> <section class="content" id="oil"> <div class="wrapper"> <!-- 2つ目のコンテンツ --> </div> </section> <section class="content" id="culinary"> <div class="wrapper"> <!-- 3つ目のコンテンツ --> </div> </section> <footer> <div class=wrapper> <!-- フッタ 4つ目のコンテンツ --> </div> </footer> </body> </html>
Step 3: ベースとなるスタイルシート
まずは、各コンテンツのwrapperのスタイルです。
レスポンシブに対応するため、デフォルトの「box-model」が「content-box」にセットします。
.wrapper {
width: 100%;
margin: 0 auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
背景をセットし、数値の指定はレスポンシブ対応なので「%」にします。
数値は画像の高さが1,200pxなので、最初のセクションを500pxにする場合は、500/1200x100=で、41.66667%になります。
#oil .wrapper {
background: url(../images/lavender2.jpg) 4.16667% center no-repeat;
padding: 10% 4.16667% 10% 50%;
background-size: 41.66667% auto;}
続いて、Media Queriesで、より大きいモニター用の指定をします。
@media only screen and (min-width: 1200px) {
.wrapper {
width:1200px; }
........
#oil .wrapper {
padding: 120px 50px 120px 600px; }
Step 4: スクロールのエフェクト
スクロールのエフェクトはJavaScriptは使用せず、CSSのみで実現しています。また、余計なHTMLも使用しないようにするため、疑似要素を使用します。
section:after, header:after {
content: "";
display: block;
height: 400px;
width: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6); }
各コンテンツごとに対応した背景画像を割り当てます。
header:after {
background-image: url(../images/lavenderbg1.jpg); }
#oil:after {
background-image: url(../images/lavenderbg2.jpg); }
#culinary:after {
background-image: url(../images/lavenderbg3.jpg); }
#dried:after {
background-image: url(../images/lavenderbg4.jpg); }
Step 5: 仕上げ
「background-attachment:fixed」はSafariが非サポートなので、次のMedia Queriesを加えます。
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px), only screen and (min-device-width: 320px) and (max-device-width: 480px) {
section:after, header:after {
background-attachment: scroll; }
}
また、より小さいモニターのために、フォントサイズを少し小さく表示します。
@media only screen and (max-width: 600px) {
body {
font-size: .75em; }
}
sponsors
