a-little-log

simpleParallax.jsとは

simpleParallax.js は、画像に手軽にパララックス効果を与えられる JavaScript ライブラリです。

スクロールに応じて画像が上下左右に動くことで、奥行きや立体感のある演出を簡単に実装できます。

「パララックス効果」とは、スクロールに合わせて背景や画像の動きを変化させ、視差を生み出す手法のことです。

Webサイトのデザインをリッチに見せるテクニックとして多く利用されており、ランディングページやポートフォリオサイト、ブランドサイトなどでよく見かけます。

その中でも simpleParallax.js は名前の通りシンプルでお手軽に実装できる素晴らしいライブラリです。わずか数行のコードでパララックス効果を加えられるため、初めてパララックスを試したい人にもオススメです。

simpleParallax.js - Easy Parallax Effect for React & JavaScript

simpleParallax.jsの導入方法

ライブラリの読み込み方法は、CDN経由でもnpmからでも問題ありません。公式の案内に従って読み込んでください。

CDN で読み込む

<script src="https://cdn.jsdelivr.net/npm/simple-parallax-js@5.6.2/dist/simpleParallax.min.js"></script>

npmまたはyarnでインストール

npm install simple-parallax-js

yarn add simple-parallax-js

simpleParallax.jsの使い方

視差効果をつけたい画像にclassをつける

パララックスをつけたい画像（imgタグ）に直接classをつけます。class名は任意の名前で構いません。

後述する理由から、background-imgには利用できません。

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

simpleParallaxのインスタンスを作成し、指定した画像にスクロールに応じたパララックス効果を適用します。

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

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

オプション設定

より演出を強めたい場合はオプションを指定できます。例えば画像を拡大して動きを大きく見せたい場合は scale を設定します。

• scale … 拡大率（大きくすると動きが目立つ）
• orientation … 動く方向（上下左右）

let target = document.getElementsByClassName('js-simpleParallax');
new simpleParallax(target, {
  scale: 1.5,
  orientation: 'up' // 他に 'down', 'left', 'right' なども指定可能
});

実際のサンプル

参考までにデモページをご用意しましたので、併せて確認してみるとわかりやすいです。(PCでの閲覧推奨)

simpleParallax.jsのデモページ

実装の仕組みと注意点

デフォルトの設定かつよく使われる「下にスクロールした場合画像が上に移動する」状態を前提に話を進めます。

実装はかなり簡単ですが、その仕組みには気を付ける必要があります。どのようにパララックス効果を与えるかを理解していないと、求めている動作ではない可能性がありますので気をつけましょう。

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

simpleParallax.js は、対象となる画像を 拡大して余白を作り、スクロールに合わせて位置をずらす ことでパララックスを実現しています。

実際に HTML を確認すると、ライブラリによって div タグが自動的に生成され、その中で overflow: hidden が付与されます。さらに transform: scale() で画像が拡大されているのが分かります。

つまり、画像をwidth100％で表示したい場合は左右が切れるので不向きです。

scaleはjsのオプション設定で拡大率を指定できます。

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

画質が荒くなる

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

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

上述の通り、元の画像を拡大してパララックスを生み出しますが、表示範囲は元の画像サイズになります。自動的にimgタグを包み込むようにdivタグが生成され、その要素にoverflow:hiddenが付与されます。

つまり、imgタグの親要素に画像より低いheightを指定しても、移動距離は元の画像サイズを元に計算されているため、スクロールに合わせて画像の一番下まで綺麗に表示されることはありません。

デモページでそれぞれの状態を比較してみましたので、ご確認ください。(PCでの閲覧推奨)

simpleParallax.jsのデモページ

まとめ

simpleParallax.js は、サイトを手軽にリッチに見せたいときにとても便利なライブラリです。

スクロールに合わせて画像が動く視差効果を簡単に取り入れることができ、特に背景演出や雰囲気作りを重視する場面では高い効果を発揮します。

ただし仕組み上、画像を拡大して余白を作ることでパララックスを実現しているため、画像全体をしっかりと見せたい用途にはあまり向きません。

横幅が切れてしまったり、拡大によって画質が粗くなる場合もあります。

そのため「見せたい画像を丁寧に表示する」ケースでは他のライブラリを検討した方がよいかもしれません。