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

ブラウザの高さいっぱいに表示した写真画像とベタ塗り背景のコンテンツを交互に配置した縦長ページをスクロールした際、写真画像の背景を固定表示させ、カーテンをあげるようなスクロールエフェクトを実装するスタイルシートのテクニックを紹介します。

スクリプト無しなのでスクロールのもっさり感がなく、非常にさくさく動作します。

サイトのキャプチャ

Alternate Fixed & Scroll Backgrounds

デモ

デモは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%;
}

ファイルのダウンロード

デモと制作用にSCSSも含まれたファイル一式が、下記ページの「Download」ボタンからダウンロードできます。

サイトのキャプチャ

Alternate Fixed & Scroll Backgrounds

コードは個人でも商用でもクライアントのプロジェクトでも無料で利用できます。バックリンクや帰属の必要もない、とのことです。

sponsors

top of page

©2018 coliss