【WordPress】ワードプレスでパララックスの作り方（jQuery利用）～背景のスクロールスピードを変える～

以前、ワードプレスのカバーブロックを使って、背景を固定表示してパララックス風のホームページの作り方をご紹介させていただきました。

WordPress簡単にパララックスっぽい背景にする方法【カバーブロックの使い方】

ただしこの方法だとPCで見る分には良いですが、スマホで見ると背景が固定されず、普通に背景も文字もスクロールしてしまいます。また、CSSで「background-attachment: fixed;」を使う方法もありますが、こちらも同様にスマホでは背景を固定することはできません。

Contents

パララックスとは

パララックスとは「視差効果」のことで、スクロール時に手前のコンテンツ（テキストなど）と奥のコンテンツ（背景など）のスクロールスピードをずらすことによって、奥行きがあるように見せたり、といったホームページの表現技法になります。

具体的には、こちらのサンプルサイトをご参照ください。

サンプルサイト

WordPressでjQueryを使うには

jQueryというのは、JavaScriptのライブラリになります。
JavaScriptとは、ホームページが表示されるブラウザ上で動くプログラムのことで、これによって、動きのあるホームページを作れたりします。そのJavaScriptを扱いやすく、簡単にプログラムを記述できるようにしたのが、jQueryになります。

jQueryを利用するためには、基本的にHTMLの中にjQueryを読み込む必要がありますが、WordPressの場合、あらかじめライブラリが読み込まれています。ですので、jQueryをあらためてダウンロードする必要はありません。

jQueryのコードを記述

jQueryのコードは、header.phpの</head>の直前か、footer.phpの</body>の前に記述しましょう。

ワードプレス・テーマによっては、JavaScriptを記述できる機能があったりしますが、基本は、ワードプレス管理画面「外観」＞「テーマファイルエディタ―」から、PHPファイルを選んで書き換えるか、FTPソフトなどでPHPファイルをダウウンロード→書き換え→アップロードとなるかと思います。

以下のコードをコピペで大丈夫だと思います。

<script>
jQuery(function () {
       jQuery(window).on('scroll', function () {
        if (jQuery(this).scrollTop() > jQuery("#parallax").offset().top - jQuery(window).height()) {
            jQuery("#parallax").css('background-position-y', (jQuery(this).scrollTop() - jQuery("#parallax").offset().top) * 0.5 + 'px');
        } 
    });
});	
</script>

HTMLコードを記述

今度は、固定ページもしくは投稿ページの編集画面で、HTMLコードを記述します。

HTMLコードを記述するには、ブロックの追加で、「カスタムHTML」を選択・追加、

入力欄に以下のコードを記述してください。

<div class="para_wrap">
   <div class="para_image1" id="parallax">
      <div class="para_inner"><p>パララックスのコンテンツ１</p></div>
   </div>
</div>

ここで、<div class=”para_inner”>・・・</div>の部分が、パララックス内部のコンテンツになります。

追加CSSの記述

後はCSSを記述します。CSSは、ワードプレス管理画面「外観」＞「カスタマイズ」をクリック、さらに「追加CSS」をクリックし、入力欄に入力していきます。

.para_wrap{
  margin:0 calc(50% - 50vw);
}
.para_image1{
  position: relative;
  background-size: cover;
  height: 100vh;
  background-image: url("画像データURL");
	
}
.para_inner p{
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  color:#fff;
}

上記のコードで、.para_image1の”画像データURL”は、ご自身で画像をアップロードしておいて、そのファイルURLを入れていただければと思います。

サンプルサイト

サンプルでは、２つパララックスの箇所がありますので、ID名を変えて（”#parallax”の部分）jQueryのコードも２つ用意していただければと思います。