パララックス効果を採用したサイトが一時期ブームになっていましたが、それに合わせてたくさんのプラグインが登場しました。ただプラグインで実装しようとすると細かなカスタマイズが面倒だったりと少し使いづらい面もあります。   そこで今回はプラグインを使わず、カスタマイズしやすいパララックス効果を実装していきたいと思います。  

1. CSSのみで実装する背景固定のパララックス効果

背景画像を固定にすることで、スクロールした時にコンテンツエリアが前面にあるように見せる方法です。わかりやすいパララックス効果になります。 【HTML】

<div class="wrap">
    <div class="parallax bg-01">背面：パララックスエリア
    </div>
    <div class="content">前面：コンテンツエリア
    </div>
    <div class="parallax bg-02">背面：パララックスエリア
    </div>
    <div class="content">前面：コンテンツエリア
    </div>
</div>

  【CSS】

.parallax {
    min-height: 400px;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;    
}
.content {
    padding: 60px;
    background-color: #fff;
}
.parallax.bg-01 {
    background-image: url(../img/sample-01.jpg);
}
.parallax.bg-02 {
    background-image: url(../img/sample-02.jpg);
}

  サンプルはこちらから  

background-attachment: fixed;とbackground-size: cover; がスマホで正しく表示されない

スマホの場合、background-attachment: fixed;が効かず、固定にならない状態でそのままスクロールする現象やbackground-size: cover;で正しく拡大されないなどの問題が発生します。その対策として擬似要素を生成してその擬似要素を、z-index: -1;で背面にまわし、position: fixed;で固定させることで対応する手法があります。モバイル表示の用に下記のCSSを追加します。ただし仕様上、ページ内で複数のセクションに対応するのはCSSだけでは難しそうですが。   【CSS】

/* mobile bugfix */
@media screen and (max-width: 575px) {
  .parallax {
    background-image: none !important;
    height: 100%;
  }
  .parallax::before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    -webkit-transform: translate3d(0, 0, -1px);
    transform: translate3d(0, 0, -1px);
    width: 100%;
    min-height: 100%;
    -webkit-background-size: cover;
    background-size: cover;
    z-index: -1;
  }
  .parallax.bg-01::before {
      background-image: url(./images/20170910_01.jpg);
  }
  .parallax.bg-02::before {
      background-image: url(./images/20170910_01.jpg);
  }
  .parallax.bg-03::before {
      background-image: url(./images/20170910_01.jpg);
  }
}

  サンプルはこちらから（スマホで確認ください）  

2. jQueryで実装する背景遅延のパララックス効果

スクロールイベントに合わせて背景画像の位置をずらすことにより視差効果を表現しています。背景画像をずらす速度は変数でコントロールすることができ、背景遅延の調整が可能です。より自然な形のパララックスになります。   【HTML】

<div class="wrap">
    <div class="parallax bg-01" id="parallax-01">背面：パララックスエリア
    </div>
    <div class="content">前面：コンテンツエリア
    </div>
    <div class="parallax bg-02" id="parallax-02">背面：パララックスエリア
    </div>
    <div class="content">前面：コンテンツエリア
    </div>
</div>

  【CSS】

.parallax {
    min-height: 400px;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;    
}
.content {
    padding: 60px;
    background-color: #fff;
}
.parallax.bg-01 {
    background-image: url(../img/sample-01.jpg);
}
.parallax.bg-02 {
    background-image: url(../img/sample-02.jpg);
}

  【javascript】

$(function(){
  var target1 = $("#parallax-01");
  var targetPosOT1 = target1.offset().top;
  var target2 = $("#parallax-02");
  var targetPosOT2 = target2.offset().top;
  var targetFactor = 0.5;
  var windowH = $(window).height();
  var scrollYStart1 = targetPosOT1 - windowH;
  var scrollYStart2 = targetPosOT2 - windowH;
  $(window).on('scroll',function(){
    var scrollY = $(this).scrollTop();
    if(scrollY > scrollYStart1){
      target1.css('background-position-y', (scrollY - targetPosOT1) * targetFactor + 'px');
    }else{
      target1.css('background-position','center top');
    }
    if(scrollY > scrollYStart2){
      target2.css('background-position-y', (scrollY - targetPosOT2) * targetFactor + 'px');
    }else{
      target2.css('background-position','center top');
    }
  });
});

  サンプルはこちらから   これくらいならプラグインを使わなくても手軽に導入することができますし、シンプルな構造なのでカスタマイズも簡単です。ぜひお試しください。