a-little-log

simpleParallax.js

パララックスを簡単に実装できるライブラリです。上下左右どの方向にもパララックスをつけることができます。名前の通り、使い方はシンプルでお手軽に実装できて素晴らしいライブラリです。
simpleParallax.js - Easy Parallax Effect for React & JavaScript

simpleParallax.jsの使い方

ライブラリ自体の読み込みは各自お好みで行なってください。

classはimgタグにつける

パララックスをつけたい画像に直接classをつけます。
後述する理由から、background-imgには利用できません。

<figure>
  <img class="js-simpleParallax" src="./img/samlpe.jpg" alt="">
</figure>

デフォルトの設定だと下記のみで動作します。

let target = document.getElementsByClassName('js-simpleParallax');
new simpleParallax(target);

実際のサンプル

参考までにデモページをご用意しましたので、併せて確認してみるとわかりやすいです。
simpleParallax.jsのデモページ

気を付けること

基本的にはデフォルトの設定かつよく使われる「下にスクロールした場合画像が上に移動する」状態を前提に話を進めます。
実装はかなり簡単ですが、その仕組みには気を付ける必要があります。どのようにパララックス効果を与えるかを理解していないと、求めている動作ではない可能性がありますので気をつけましょう。

画像を拡大してパララックスを出す

対象となる画像を拡大することで、余白を生み出してパララックスを生み出します。実際jsが動作した後のhtmlを確認すると、cssのscaleが付与され、画像が拡大されていることが確認できます。
つまり、画像をwidth100％で表示したい場合は左右が切れるので不向きです。
scaleはjsの設定で拡大率を指定できます。

let target = document.getElementsByClassName('js-simpleParallax');
  new simpleParallax(target, {
    scale: 1.5
  });

画質が荒くなる

scaleで拡大しているので、拡大しすぎると画質が荒くなります。

表示領域は元の画像サイズになる

上述の通り、元の画像を拡大してパララックスを生み出しますが、表示範囲は元の画像サイズになります。自動的にimgタグを包み込むようにdivタグが生成され、その要素にoverflow:hiddenが付与されます。
つまり、imgタグの親要素に画像より低いheightを指定しても、移動距離は元の画像サイズを元に計算されているため、スクロールに合わせて画像の一番下まで綺麗に表示されることはありません。
デモページでそれぞれの状態を比較してみましたので、ご確認ください。
simpleParallax.jsのデモページ

まとめ

サイトをリッチに見せるため、雰囲気としてパララックス効果をつけるのであればsimpleParallax.jsはお手軽なライブラリです。視差効果を強調したい場合や、背景演出として画像を使用する際には非常に効果的です。

しっかり画像を見せたい場合には不向き

例えば「画像の全体を見せたいけど、そのまま表示するサイズが大きすぎるので表示範囲を指定・スクロールさせてコンパクトにしたい」時などには不向きです。画像自体が拡大されてしまうので、横幅は見切れます。使用目的によって他のライブラリと使い分けたいところです。