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

ホームページ制作で流行りのパララックス(視差)効果を持たせ、スクロールするのが楽しくなるような仕掛けをサイトに仕込みたい!もちろんレスポンシブデザインにも対応させ、スマホでもパララックスを……

スマホで見ると「パララックス効かせた所がおかしくなってる!」なんて事ありませんか?
はい、よくなります!

パソコンとスマホではスクロール速度の違いから、スマホでのパララックス効果は不具合の出やすい箇所の1つです。
そんな時、javascriptをウィンドウサイズによって分岐し、パソコンでの閲覧時のみにパララックス効果を持たせる方法をご紹介いたします。

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

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

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

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

作成したDiv要素「bg_image_01」に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内に記述します。

<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をウィンドウサイズで分岐

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

<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をウィンドウサイズで分岐して発動させる記述です。
1行目の「$windowWidth = window.innerWidth;」で読み込み時のウィンドウサイズを調べ、そのサイズによって分岐する仕組みです。

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

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

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

まとめ

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

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

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

最後までご覧いただきありがとうございました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Scroll to top