パララックスできるかな？ jQueryプラグイン「Enllax.js」を使って実装してみよう

Update:

数年前（もっと前かも）、彗星の如くWEB業界に現れたパララックス。当時は目新しさもあって何かにつけてはWEBサイトへのパララックスの実装が求められました。
その頃は私はデザインチームだったので実装には関わっておらず、徐々に「あの熱は何だったのか？」というくらいパララックスは下火になっていきました。
しかし、実装したい案件は時々やってきます。その時になって慌てて検索せず、やれるようになっておこう！という記事です。

jQueryプラグイン「Enllax.js」を用意します

GitHub - mmkjony/enllax.js: Enllax is an ultra-lightweight (~1kb) and super e...
Enllax is an ultra-lightweight (~1kb) and super easy to use plugin for parallax scrolling effect. - GitHub - mmkjony/enllax.js: Enllax is an ultra-lightweight (~1kb) and super easy to use plugin fo...

英語ですがシンプルなので大丈夫かと。
デモページは以下。（背景画像のリンクは外れちゃってるので、検証モードから適当に画像リンクを差し替えるとちゃんと見れます）
Enllax.js | a plugin for parallax scrolling effect by MMK Jony
An ultra-lightweight and super easy to use plugin for parallax scrolling effect

jQueryはすでに手元にあるものと仮定して進めます。
上記サイトからEnllax.jsをDLし、適所に格納します。

このプラグインのみだとちょっと動きがカクつくので、補佐的に読んで字の如くSmoothScrollのjsも読み込みます。

GitHub - msng/jquery.smoothScroll: A jQuery plugin for smooth scroll
A jQuery plugin for smooth scroll. Contribute to msng/jquery.smoothScroll development by creating an account on GitHub.

CDNだとこちら。

<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.4/SmoothScroll.min.js"></script>

htmlでの読み込み順は、jquery→SmoothScroll.js→enllax.jsとします。
下記格納位置はサンプルです。各環境での格納位置に合わせて調整してください。

<script src="/js/jquery-3.4.1.min.js"></script>
<script src="/js/jquery.smoothScroll.js"></script>
<script src="/js/jquery.enllax.js"></script>

実行用のscript、データ属性を記述

<script>
  $(window).enllax();
</script>

上記の記述を加えたあと、パララックスをかけたい要素に以下のデータ属性を当てます。
この属性次第で、縦、横など方向、スクロールスピードの設定ができます。

背景画像にパララックスをかけたい

デフォルトの縦方向の設定であれば背景画像を指定している要素のタグにdata-enllax-ratio="0.5"（数値は任意。大きくすればダイナミックな動きに、またマイナスの数値にすることも可）を付け加えるだけです。

記述例
<section data-enllax-ratio=".5">
（中略）
</section>

背景画像以外の要素にパララックスをかけたい

data-enllax-ratio="0.5"だけではなく、data-enllax-type="foreground"の記述も付け加える必要があります。

どうして背景画像にパララックスをかけるときにこのdata-enllax-type="foreground"がいらないのさ？と気になる人もいるかと思います。デフォルト（指示してない状態）がdata-enllax-type="background"で「背景を動かすよ〜」という指示なので必要無いんですね。

記述例
<img src="images/free-icon/business01.svg" alt="" width="100px" height="100px" data-enllax-ratio="1.5" data-enllax-type="foreground">

視差効果の方向を指定したい

デフォルトでは縦方向に視差効果がかかります。横方向にしたい場合は、data-enllax-direction="horizontal"の記述を追加します。

記述例
<img src="images/free-icon/business01.svg" alt="" width="100px" height="100px" data-enllax-ratio="1.5" data-enllax-type="foreground" data-enllax-direction="horizontal">

Demoページ

パララックスのデモページ

できた〜〜！
スマホで見るとスクロール時にカクつきますね。
PCのみに適用するか（スマホの小さい画面でパララックスしても効果的ではないし）、どうしてもスマホで適用せざるをえない場合は別のプラグインを使いましょう。

関連記事: