[CSS]背景を固定させ、カーテンをあげるようにコンテンツを次々にスクロールで表示させるテクニック

サイト構築 -CSS

Post on:2014年7月14日

デモ

デモはChrome, Safari, Firefox, Operaなどのモダンブラウザ、IEは9+でご覧ください。
エフェクトにスクリプトを使用していないので、スクロールも快適です！

デモページ

少しだけスクロールしてみます。

少しスクロールしたところ

写真画像の背景は固定表示で、コンテンツとベタ塗りだけがスクロールします。

実装

HTML

HTMLはシンプルで、main要素をラッパーに、div要素で写真画像とベタ塗りのコンテンツを交互に配置します。
固定表示するコンテンツには「.cd-fixed-bg」、スクロールするコンテンツには「.cd-scrolling-bg」と入れ子のdivを加えます。

<main>
    <div class="cd-fixed-bg cd-bg-1">
        <h1>見出し</h1>
    </div> 
 
    <div class="cd-scrolling-bg cd-color-1">
        <div class="cd-container">
            <p>
                コンテンツ
            </p>
        </div> 
    </div>

    <div class="cd-fixed-bg cd-bg-2">
        <h1>見出し</h1>
    </div> 
 
    <div class="cd-scrolling-bg cd-color-2">
        <div class="cd-container">
            <p>
                コンテンツ
            </p>
        </div> 
    </div> 
</main>

CSS

一つのdivのコンテンツは表示高さいっぱいに配置されるよう設定します。
背景は通常はコンテンツと一緒にスクロールしてしまうので、「.cd-fixed-bg」の背景を「background-attachment」で固定表示させます。あとは各背景の画像やベタ塗りを指定するだけです。

body, html, main {
    /* important */
    height: 100%;
}
 
.cd-fixed-bg {
    min-height: 100%;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
}
 
.cd-fixed-bg.cd-bg-1 {
  background-image: url("../img/cd-background-1.jpg");
}
.cd-fixed-bg.cd-bg-2 {
  background-image: url("../img/cd-background-2.jpg");
}
.cd-fixed-bg.cd-bg-3 {
  background-image: url("../img/cd-background-3.jpg");
}
.cd-fixed-bg.cd-bg-4 {
  background-image: url("../img/cd-background-4.jpg");
}
 
.cd-scrolling-bg {
    min-height: 100%;
}