on:2012年11月13日sponsors背景画像を表示サイズに合わせていっぱいに表示し、コンテンツのスクロールに合わせカーテンがめくれるように背景画像を変更するスタイルシートのチュートリアルを紹介します。eBayで使用されているエフェクトです。effectデモ実装デモデモは疑似要素を使用しているので、全てのモダンブラウザ、IE8+でご覧ください。デモページスクロールすると、カーテンを引き上げるように背景画像が表示されます。次のコンテンツになると、別の背景画像が表示されます。実装はレスポンシブ対応なので、表示サイズを変更してもOKです。実装は、5ステップです。背景画像の用意デモでは4つのコンテンツがあるので、3枚の背景画像を用意しています。大きい表示サイズを想定して、1,800x1,200pxの画像です。HTMLHTMLは非常にシンプルです。footerで内包します。ベースとなるスタイルシートまずは、各コンテンツのwrapperのスタイルです。レスポンシブに対応するため、デフォルトの「box-model」が「content-box」にセットします。}背景をセットし、数値の指定はレスポンシブ対応なので「%」にします。数値は画像の高さが1,200pxなので、最初のセクションを500pxにする場合は、500/1200x100=で、41.66667%になります。Queriesで、より大きいモニター用の指定をします。スクロールのエフェクトスクロールのエフェクトはJavaScriptは使用せず、CSSのみで実現しています。余計なHTMLも使用しないようにするため、疑似要素を使用します。}各コンテンツごとに対応した背景画像を割り当てます。Queriesを加えます。}また、より小さいモニターのために、フォントサイズを少し小さく表示します。Posts関連記事が見つかりませんでした。