【WEB制作】PCのみにパララックス効果を効かせる方法【javascript分岐】

レスポンシブサイトの制作で視差効果（パララックス）を持たせ、スクロールするのが楽しくなるような仕掛けをサイトに仕込みたい！
でも、スマホで見ると「パララックスを効かせた所がおかしくなってる！」なんて事はありませんか？

パソコンとスマホではスクロール速度の違いから、スマホでのパララックス効果は不具合の出やすい箇所の１つです。

そんな時はパララックスを効かせているjavascriptをウィンドウサイズによって分岐してみてはいかがでしょうか。

今回はパソコンでの閲覧時のみにパララックス効果を効かせる方法をご紹介いたします。

パララックス効果とは？
- パララックス効果を実装する時の注意点
PCのみにパララックス効果を効かせる
- まずは背景画像にパララックス効果を実装
- javascriptをウィンドウサイズで分岐し、PCのみに適応
まとめ：PCのみにパララックス効果を効かせる方法

パララックス効果とは？

「Parallax（パララックス）」とは日本語で直訳すると「視差」という意味になります。

Webデザインにおいてのパララックス効果は、画面をスクロールする時に各要素のスクロールスピードに変化をつけたり、動きを持たせルコとで立体感や遠近感を演出する手法です。

奥行きのあるデザインになり、より洗練された印象のホームページになります。

パララックス効果を実装する時の注意点

サイトに奥行きを持たせることができるパララックス効果ですが、昨今では必須のレスポンシブデザインにパララックス効果を持たせる時には注意が必要です。

ポイント

パソコンとタブレット・スマートフォンではスクロール速度が違うため、スクロール速度によって変化をもたらすパララックスのアニメーション速度を端末ごとに変えることが必要となります。

そんな時に、今回ご紹介する端末ごとにjavascriptを分岐する方法が役に立ちます。

PCのみにパララックス効果を効かせる

まずは背景画像にパララックス効果を実装

まずは、Div要素にCSSで背景画像を配置します。

htmlにDiv要素「bg_image_01」を作成します。

 html
<div id="bg_image_01"></div>

作成したDiv要素「bg_image_01」にCSSでボックスサイズと背景画像を指定します。

 css
#bg_image_01 {
  width: 100%;
  height: 300px;
  background-image: url(../img/bg_image_01.jpg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center bottom;}

この背景画像にパララックス効果を持たせ、スクロール速度をずらし奥行きの感じられる動作を実装します。
下記のjavascriptをhtmlのhead内に記述します。

 html
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
  (function ($) {
  'use strict';
  let scrollPosi = 0;
  $(window).scroll(function () {
  scrollPosi = $(document).scrollTop();
  $('#bg_image_01').stop(true, true).animate({
  'background-position-y': -scrollPosi / 10 + 'px'
  }, 100);
  });
  })(jQuery);
</script>

このようにスクロール速度をずらすことができ、奥行きの感じられる動作を実装します。
スクロール速度は「-scrollPosi / 10 + 'px'」のところの「10」の数字を変更して調整できます。

ポイント

パララックスを実装するとパソコンとスマートフォンではスクロール速度が違うため、不具合が起こりやすい原因となります。
また回線速度の違いからスマホではパララックス無くて良い！という方の為、このパララックス効果をPCでの閲覧時のみ発動するようにカスタムしていきます。

javascriptをウィンドウサイズで分岐し、PCのみに適応

方法はシンプルです。
レスポンシブサイトでCSSをウィンドウサイズによって使い分けるのと同じ要領で、javascriptもウィンドウサイズによって使い分けて記述していきます。

詳しい記述の方法は下記ページをご覧ください。

Check!

: 知らなかった！レスポンシブサイトでjavascriptを分岐させる方法２パターン紹介

続きを見る

 html
<script type="text/javascript">
$windowWidth = window.innerWidth;
$breakPointA = 480;
$breakPointB = 980;

isMobileSize = ($windowWidth < $breakPointA);
isTabletSize = ($windowWidth <= $breakPointB) && ($windowWidth > $breakPointA);
isPcSize = ($windowWidth > $breakPointB);

if(isMobileSize){
//モバイルサイズ（480px以下）の場合の記述
}

if(isTabletSize){
//タブレットサイズ（480px以上、980px以下）の場合の記述
}

if(isPcSize){
//PCサイズ（980px以上）の場合の記述【ここにパララックスのjavascriptを記述】
}
</script>

上記がjavascriptをウィンドウサイズで分岐して発動させる記述です。
１行目の「$windowWidth = window.innerWidth;」で読み込み時のウィンドウサイズを調べ、そのサイズによって分岐する仕組みです。

スマホはウィンドウサイズ480px以下、タブレットは980px以下、それ以上はPCと分けてjavascriptを記述していきます。スマホ・タブレットをどこで切り替えるかは２行目、３行目の「480」「980」の数字を調整し使用して下さい。

この分岐の「PCにのみ有効」箇所にパララックスのjavascriptを記述すると下記のようになります。

 html
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">$windowWidth = window.innerWidth;

$breakPointA = 480;
$breakPointB = 980;

isMobileSize = ($windowWidth < $breakPointA);
isTabletSize = ($windowWidth <= $breakPointB) && ($windowWidth > $breakPointA);
isPcSize = ($windowWidth > $breakPointB);

if(isMobileSize){
//モバイルサイズ（480px以下）の場合の記述
}

if(isTabletSize){
//タブレットサイズ（480px以上、980px以下）の場合の記述
}

if(isPcSize){
//PCサイズ（980px以上）の場合の記述【ここにパララックスのjavascriptを追記】
  (function ($) {
  'use strict';
  let scrollPosi = 0;
  $(window).scroll(function () {
  scrollPosi = $(document).scrollTop();
  $('#bg_image_01').stop(true, true).animate({
  'background-position-y': -scrollPosi / 10 + 'px'
  }, 100);
  });
  })(jQuery);
  }
</script>

jqueryの読み込みは一番上に記述し、パララックスの記述をPCにのみ有効箇所に記述しました。
これでスマホ・タブレットにはパララックス効果を与えず、PCにのみパララックス効果を有効にすることができました。