WEB 作りたい

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

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

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

そんな時はパララックスを効かせている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」の数字を変更して調整できます。

注意

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

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

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

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

あわせて読みたい!
知らなかった!レスポンシブサイトでjavascriptを分岐させる方法2パターン紹介

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

スマホはウィンドウサイズ480px以下、タブレットは980px以下、それ以上はPCと分けてjavascriptを記述していきます。スマホ・タブレットをどこで切り替えるかは2行目、3行目の「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にのみパララックス効果を有効にすることができました。

まとめ

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

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

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

本格的にhtmlやCSSを学びたいなら、自宅で現役エンジニアから学べるテックアカデミーがオススメ!まずは無料体験!

私も現在phpを勉強中!
daruma108

テックアカデミー公式ホームページへ

※無料体験だけならいっさいお金はかかりません。

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

-WEB, 作りたい
-, , ,

© 2021 ひゃくやっつ