• カミナリツイッターカミナリtwitter
  • カミナリフェイスブックカミナリfacebook
  • カミナリインスタグラムカミナリinstagram

山陰の情報を発信するカミナリ

ナビ

25

NOVEMBER

ウェブMONDAY 2019 / 11 / 25

初心者向け!コピペで簡単にレスポンシブに強いパララックスを実装する<parallax>

Text by Shinji Satoh

  • カミナリツイッターカミナリtwitter
  • カミナリフェイスブックカミナリfacebook

こんにちは。

佐藤です。

 

 

 

 

みなさん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)');
    }
  });
}

 

 

 

 

佐藤真司隠しプロフィール画像

TEXT by

佐藤 真司さとうしんじ)

1990年 鳥取県米子市生まれ。
株式会社マジックワード フロントエンドエンジニア。

この人が書いた他の記事を読む