スクロールしている時の背景画像にパララックス効果を加える方法

最近よく見かけるスクロールしていくと固定された背景画像が変わっていくページを作ってみました。最近よく見かける割に、すごい新しい手法を使って作ったわけではないので、工夫次第で、今ある技術でもっといろんな表現が出来るかもなぁと再確認しました。

作り方は完全に我流なので、こういう作り方の方がスマートっていうやり方があれば是非とも教えてください。

HTMLとCSSを準備

HTMLとCSSを準備します。
流れとしては最初の段階ではbodyにbackground-imageで「01.jpg」を表示させておき、スクロールしていって、クラス[bg02][bg03][bg04]を追加していき、backgroundを上書きするやり方になります。[background-attachment]プロパティでスクロールした時に背景画像を固定するかどうかを指定出来ます。

HTML

<body id="bg">
  <div class="contents01">
	・・・
  </div>
  <div class="contents02">
	・・・
  </div>
  <div class="contents03">
	・・・
  </div>
  <div class="contents04">
	・・・
  </div>
</body>

CSS

#bg{
  background-image: url(../img/01.jpg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  background-attachment: fixed;
}

#bg.bg02{ background-image: url(../img/02.jpg); }
#bg.bg03{ background-image: url(../img/03.jpg); }
#bg.bg04{ background-image: url(../img/04.jpg); }

#bg div{
  margin-top: 500px;
  padding: 50px;
  background-color: #fff;
}

#bg h2{
  font-size: 2em;
  margin-bottom: 20px;
}

#bg p{
  line-height: 180%;
  margin-bottom: 15px;
}

jQueryを準備

jQueryではそれぞれ必要な高さを取得して、背景画像を切り替えたい高さにきた時に、設定したクラスが追加されるようにしています。

$(function(){
  $(window).on('load scroll resize', function(){
    var scrollTop = $(window).scrollTop(); // スクロールした距離を取得
    var contents01Height = $('.contents01').offset().top; // 一番上から[contents01]まで距離を取得
    var contents02Height = $('.contents02').offset().top; // 一番上から[contents02]まで距離を取得
    var contents03Height = $('.contents03').offset().top; // 一番上から[contents03]まで距離を取得
// スクロールした距離が[contents01]に到達した時にクラス[bg02]を追加します
    if (scrollTop >= contents01Height){
      $('#bg').addClass('bg02');
    } else {
      $('#bg').removeClass('bg02');
    }
// スクロールした距離が[contents02]に到達した時にクラス[bg03]を追加します
    if (scrollTop >= contents02Height){
      $('#bg').addClass('bg03');
    } else {
      $('#bg').removeClass('bg03');
    }
// スクロールした距離が[contents03]に到達した時にクラス[bg04]を追加します
    if (scrollTop >= contents03Height){
      $('#bg').addClass('bg04');
    } else {
      $('#bg').removeClass('bg04');
    }
  });
});

少しでも参考になれば幸いです。