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

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

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

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

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

関連レスポンシブサイトでjavascriptを分岐させる方法
関連HTMLにJavaScriptを適用する方法

パララックス効果とは？

「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」の数字を変更して調整できます。

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にのみパララックス効果を有効にすることができました。

まとめ：PCのみにパララックス効果を効かせる方法

いかがでしたでしょうか。

パソコン・スマートフォン両方での閲覧時に魅力的なパララックス（視差）効果を不具合なく持たせることができれば、それに越したことはありません。
ですが、スマートフォンで不具合が発生し、無理矢理直そうとパソコンで見たときのパララックス（視差）効果までおかしくなると本末転倒です。

時には割り切ってスマホでのパララックスは切ってしまい、制作時間の短縮や不具合の回避に努めることも頭に入れておくことをお勧めします。

• WEBやプログラミングの知識をつけたい
• でも、スクールの学費は高すぎる

という方には、安価で始められる「侍テラコヤ」がオススメ！

Check!

「侍テラコヤ」は安くで始めるプログラミングスクール【リスキリングにおすすめ】評判や特徴をレビュー

続きを見る