parallax.js をWordPressにインストールする方法と基本的な使い方

こんにちは、mickです。

パララックスを実現するJavaScriptの parallax.js の基本的な使い方を紹介します。
あわせてWordPressにインストールする方法も紹介します。

パララックスは画面スクロールに合わせて動く

パララックスは、視差効果を使ってWebサイトの表示を立体的に見せるテクニックです。

人間が両目を使ってものを立体にみているのと同じ仕組みを使っています。

ブラウザをスクロールすると画像や文字が一緒にスクロールします。
そのスクロールには、画像や文字にそれぞれ速度の差があるように見えます。

パララックス Parallax は日本語に訳すと「視差」になります。

最近ではiPhoneを出しているApple社の公式サイトが新型iPadAirの紹介にパララックスを使ってます（2020年10月2日現在）。

少ない画像とキーワードをちりばめて、文字が少ないながらインパクトがあります。

パララックスを効果的に使っています。

早速WordPressでパララックス parallax.js を使っていきます。

parallax.js を配布のWebサイトからダウンロードします。

ダウンロードしたファイルは圧縮（zip）しています。
これを解凍します。

今回使うのは「parallax.min.js」です。

これは動作に不要なコメントや改行などをなくして、最適化してあるjsファイルになります。

parallax.jsのソースコードをみて勉強したいときは「parallax.js」をみます。

中身は同じものだと思ってもらって大丈夫です。

WordPressにparallax.jsを設置してインストールしていきます。

使っているWordPressのテーマのフォルダ内にある「js」フォルダ内に設置します。

もし「js」フォルダがなかったら、作っておくと今後わかりやすいと思います。

これでparallax.jsのインストールができました。

WordPressにparallax.jsを設置したら次はWebページで使えるようにします。

parallax.jsを読み込むスクリプトはjQuery.jsの読み込みより後ろに設置します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/path/to/parallax.js"></script>

これでparallax.jsを使う準備ができました。

いよいよパララックスを使っていきます。

<div data-parallax="scroll" data-image-src="/path/to/image.jpg"></div>

ポイントは2点です。

parallax.jsには約10個のオプションがあります。
そのなかのひとつ、「data-speed属性」はパララックスのスピードを変えます。

<div data-parallax="scroll" data-image-src="/path/to/image.jpg"　data-speed=”0.5”></div>

このようにdata-speed属性の値は0から1.0までの値を指定します。

数字が大きいほどパララックスのスピードが遅くなります。

iOSやAndroidといったスマホやタブレットではパララックスの視覚効果にはなりません。

パララックスを実現するJavaScriptの parallax.js の基本的な使い方を紹介しました。

parallax.jsを使うと簡単に視覚効果の高い画像スクロールを実現できます。

視覚効果が高くて思わず「おっ」となるWebページを作るなら parallax.js を試してみてはどうでしょうか。

以上、みなさまの助けなれば幸いです。

初稿 2020/10/02