【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のコードも２つ用意していただければと思います。

まとめ

このようにjQueryを使うことによってパララックスサイトを作ることができます。
ワードプレスの有料のテーマなどでは、パララックスを作れるものもあったりしますが、無料のテーマでもこのように出来ますので参考にしていただければと思います。