こんにちは。

佐藤です。

 

 

 

 

みなさんwebサイトにおけるパララックスをご存知でしょうか？

 

 

ざっくりと言うとパララックスは動くスピードなどに差を付けて

目を引くようなデザインにすること言います。

 

webでは主にスクロール量に応じて背景などを動かし

スクロールと要素の動きに差をつけるのが一般的です。

 

例を挙げるとふぁーむ大根島様の背景の木や野菜などがそうですね。

 

 

きっとパララックスという言葉を知らなくても

ほとんどの人がこの動きを見たことあるのではないでしょうか？

 

 

 

今日はこのパララックスを簡単に実装する方法をご紹介します。

 

 

 

実装にはjavascriptを使っていきます。

ちなみにスクロール量に応じて要素を動かすこと自体はとても簡単で

以下内容でも一応はそれっぽく動かせます。

var $window = $(window);
$window.on('load resize', parallax);
window.addEventListener('scroll', parallax, { passive: true });

function parallax(){
  $('対象').css('transform','translate(0,' + $window.scrollTop() / (-100) +'px)')
}

 

スクロール量とって設定するだけですので物凄く簡単ですが、

もし、これで実装してしまうと

 

 

サイトの下の要素ほど位置の調整の難易度が高くなる

レスポンシブ時の位置の調整の難易度が高くなる

サイトの修正毎に調整が必要でくっそ面倒になる

 

 

という大きな問題に直面します。

 

 

 

いくつか解決策はあると思いますが

今回はスクロールに応じて要素を動かすのは

「対象が画面に入ってから」

という対策でやっていきます。

 

これにより対象の初期の位置はあまり気にしなくてよくなるため

レスポンシブにも強い柔軟なパララックスを実装できます。

 

 

ちなみに上記のコードではjQuery使いましたが

今回の内容は純粋なjavascriptの方が簡単に制作できます。

という訳で下記コードをコピペしましょう。

  //初期設定
  var wh = window.innerHeight,
    reg = 10;//調整値、正の数だとスクロール時に上に動き、負の数だと下に動く。絶対値が大きいほど動く量が小さくなる。

  window.addEventListener('load', update_window_size);
  window.addEventListener('resize', update_window_size);
  function update_window_size() {
    wh = window.innerHeight;
  }

  var paraItems = document.querySelectorAll('.para-item');//対象
  paraItems = Array.prototype.slice.call(paraItems, 0);

  //トリガー部分
  if (paraItems.length) {
    parallax();
    window.addEventListener('load', parallax);
    window.addEventListener('resize', parallax);
    window.addEventListener('scroll', parallax, { passive: true });
  }

  //本体 
  function parallax() {
    paraItems.forEach(function (paraItem, i) {

      //動きなどもっと自由に決めたい場合はこのあたりを好きに修正する。
      paraItem.style.transform = '';
      var nowpos = paraItem.getBoundingClientRect().top - wh,
        myreg = paraItem.getAttribute('data-reg') ? Number(paraItem.getAttribute('data-reg')) : reg;
      if (nowpos < 0) {
        paraItem.style.transform = 'translate(0,' + (nowpos / myreg) + 'px)';
      }

    });
  }

あとはパララックスをかけたい要素にクラスで「para-item」を与えてやれば動きます。

※対象がinline要素だと動作しません。その場合はdisplay:inline-blockなどを使いましょう。

 

変数の「reg」の値を要素毎に変更したい場合はdata属性で

「data-reg=”5″」の様に指定すると変更できます。

 

 

 

最後に注意点として、cssのtransformを利用していますのでcssの上書には気を付けましょう。

場合によっては対象を（または対象に）入れ子にしたり、

上記コードをmargin-topなどに変更すれば問題なく動作しますよ。

 

 

 

 

 

 

 

 

 

 

 

 

 

ちなみにjQueryで実装するとこんな感じになってしまいます。

//初期設定
var $window = $(window),
    wh = window.innerHeight,
    nowScroll = $window.scrollTop(),
    reg = -10;//調整値、負の数だとスクロール時に上に動き、正の数だと下に動く。絶対値が大きいほど動く量が小さくなる。

$window.on('load resize', function () {
  wh = window.innerHeight;
  nowScroll = $window.scrollTop();
});
window.addEventListener('scroll', function () {
  nowScroll = $window.scrollTop();
}, { passive: true });

//トリガー
var $paraItem = $('.para-item');
if ($paraItem.length) {
  parallax();
  $window.on('load resize', parallax);
  window.addEventListener('scroll', parallax);
}

//処理内容
function parallax() {
  $paraItem.each(function () {
    var $this = $(this),
      scroll_bottom = nowScroll + wh;
    $this.css('transform', '');

    var nowpos = $this.offset().top;
    if (nowpos < scroll_bottom) {
      $this.css('transform', 'translate(0,' + (scroll_bottom - nowpos) / reg + 'px)');
    }
  });
}