[CSS]JavaScript無し、レスポンシブ対応、背景をコンテンツのスクロールに合わせて変更するスタイルシート

Post on:2012年11月13日

背景画像を表示サイズに合わせていっぱいに表示し、コンテンツのスクロールに合わせカーテンがめくれるように背景画像を変更するスタイルシートのチュートリアルを紹介します。
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

top of page

©2024 coliss