パララックス効果をCSSのみで実装してみよう（固定）

css

今では当たり前のように使われてる（使われていた）パララックス効果でよく背景画像がスクロールで切り替わるページってありますよね？

複雑な処理はjavascriptのライブラリでパララックス効果をアニメーションさせたりするものもありますが、ライブラリだとそのまま使うと便利ですが、カスタマイズするの大変だったりするんですよね。
今回は、そのパララックスは実際どのような仕組みになっているかを実際に作ってみて理解しようかと思います。（今さらですが）
そこでまず初めに背景画像がスクロールで切り替わるようなものを作ろうかと思います。背景画像が固定されていてアニメーションなどは含まずまずはシンプルなものです。

まずは実際に作成したパララックスの完成形

Codepenを使ってサンプルを作成してみました。スクロールすると分かりますが、背景画像が切り替わってるのが分かるかと思います。

See the Pen 背景画像をパララックスする方法 by 石切山 公宏 (@kirikirimai) on CodePen.

サンプルソースコード

ざっくりソースコードを載せて説明していこうかと。

HTMLのソースコード

ここは背景画像１のdiv要素



  
ここはコンテンツ1




ここは背景画像2のdiv要素



   
ここはコンテンツ2




ここは背景画像3のdiv要素



    
ここはコンテンツ3

背景画像にするdiv要素にparallaxクラスを設定して、コンテンツにはcontentクラスを設定しています。あとはそれぞれの背景画像用のクラスを用意して「background-image」で背景を設定してる感じです。

サンプルだと背景画像が先に表示されていますが、contentクラスの要素とparallax要素を入れ替えれば最初にコンテンツを表示させることもできます。

CSSのソースコード

body, html {
  height: 100%;
}
.content {
  padding: 10%;
  background-color: #000;
  color: #fff;
}
.parallax {
  height: 100%;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.bg_1 {
  background-image: url("http://the-zombis.sakura.ne.jp/wp_plactice_file/codepen/photo1.jpg");
}

.bg_2 {
  background-image: url("http://the-zombis.sakura.ne.jp/wp_plactice_file/codepen/photo2.jpg");
}

.bg_3 {
  background-image: url("http://the-zombis.sakura.ne.jp/wp_plactice_file/codepen/photo3.jpg");
}

contentクラスに関しては分かりやすく背景画像を黒にしてるだけなので省きます。重要なのはparallaxクラスの「background-attachment」プロパティの値を「fixed」にすることで、スクロールされても背景画像が動かないようにします。 よくヘッダーで要素を固定するのに「position]のプロパティを「fixed」にする背景画像版みたいな感じです。あとは「 background-size」プロパティを「cover」にしてあげると 背景領域を完全に覆うように拡大縮小されるのでいいかと思います。


背景画像だけを固定しているので、parallaxクラスの要素のテキストに関してはスクロールしているのが分かります。そしてparallax要素の下にあるコンテンツがスクロールで上がってくることによって隠れて、次のparallax要素の背景がスクロールで上がってきたらまた背景画像が表示されるという仕組みです。これは後の要素のほうが重なり順としては上になるので最初の背景が隠れています。

高さを調整するには？

ちょっとした余談ですが、高さを調整する場合に決まってるのであれば、parallaxクラスのcssで調整すればいいですが、画面いっぱいの高さを取りたいのであれば、bodyやhtmlタグに「heigth」のプロパティを「100％」にしてparallaxクラスにも「height」プロパティ「100％」すると画面の高さまで伸びます。

スマホには効かない？その対策として

「background- attachment 」を使えば簡単に、パララックス効果が得られますが、「 background- attachment 」と「background-size」を一緒に使うと「 background- attachment 」が利かないという仕様になっています。スマホだとそのまま背景画像は表示されてスクロールされてしまう感じです。
対策はあるのですが、背景画像を複数使用した場合は対応できません！
簡単に「出来ます！」と言わない為にも忘備録として残します。

対応策としてはparallaxクラスと背景を設定している対して「::before」の疑似要素を作成して「z-index:-1」「position:fixed」で固定する感じです。その際「width:100%」は必須で「display:block」にしてください。高さに関しては「100vh」で viewportの高さの割合にしています。「z-index」がスマホで効かない場合も含めて「translate3d」を使用しています。
背景画像を設定しているクラス、、今回であれば「.bg_1」にも「::bofore」の設定をお忘れなく。

 .parallax::before {
            content: "";
            display: block;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            -webkit-transform: translate3d(0, 0, -1px);
            transform: translate3d(0, 0, -1px);
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            z-index: -1;
        }

.bg_1::before {
            background-image: url("http://the-zombis.sakura.ne.jp/wp_plactice_file/codepen/photo1.jpg");
        }

See the Pen 背景画像をパララックスする方法（スマホ対応版ただし1枚のみ） by 石切山 公宏 (@kirikirimai) on CodePen.