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

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

こんにちは、mickです。

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

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

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

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

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

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

デザインに厳しいAppleも使ったパララックスのテクニック

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

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

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

⇒ 新型iPad Air(Apple公式サイトへ)

パララックス parallax.js をWordPressで使う方法

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

parallax.jsをダウンロード

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

⇒ Simple Parallax Scrolling parallax.js

parallax.jsの配布サイトからダウンロードする
parallax.jsの配布サイトからダウンロードする

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

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

最適化してある parallax.min.js を使う
最適化してある parallax.min.js を使う

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

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

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

WordPressにparallax.jsを設置してインストール

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

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

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

これでparallax.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を使う準備ができました。

HTMLを書く

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

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

ポイントは2点です。

  • data-parallax=”scroll”でパララックスするように指定する。
  • data-image-src=”画像ファイル”でパララックスの背景を指定する。

約10個のオプションがある

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

タイトルとURLをコピーしました