simpleParallax.jsでパララックスを簡単に実装する方法【サンプルコード付き】【JavaScript】

こんにちは！コーダーのゆうしです。

サイトにスクロールで動くパララックス効果を入れたいとき、自前でスクロールイベントを書くと結構ボリュームのあるコードになります。そんなときに便利なのが simpleParallax.js です。クラスを付けてJSを数行書くだけで手軽に導入できるので、実務でもよく使っています。この記事では導入方法からオプションの使い方まで解説します。

パララックスとは？

パララックス（Parallax）とは視差効果のことで、スクロールに合わせて背景と前景の動くスピードを変えることで、サイトに立体感や奥行き感を演出する表現手法です。コーポレートサイトやランディングページでよく使われるデザイン表現のひとつです。

simpleParallax.jsを導入する

CDNで読み込む場合

</body> の直前に以下のコードを貼り付けるだけで使えます。

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

ファイルをダウンロードして使う場合

GitHub – simpleParallax.js の「CODE」→「Download ZIP」でダウンロードし、解凍した dist フォルダ内のファイルを使用してください。simpleParallax.min.js が圧縮版で本番環境向けです。

実装コード

表示イメージ

See the Pen simpleParallax by Yushi nakagaki (@YUSHI-NAKAGAKI) on CodePen.

スクロールすると画像が少し遅れてついてくるような動きになります。

HTML

<div class="parallax-wrap">
  <img class="parallax" src="image.jpg" alt="">
</div>

パララックスを適用したい <img> タグにクラスを付けるだけでOKです。クラス名は任意で変更できます。

CSS

.parallax-wrap {
  overflow: hidden; /* はみ出た画像を隠す */
  height: 400px;
}

.parallax-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

親要素に overflow: hidden を指定することで、パララックスで画像がずれてもはみ出ないようにしています。

JavaScript

var images = document.querySelectorAll('.parallax');
new simpleParallax(images, {
  orientation: 'down',
  scale: 1.2,
  delay: 0.7,
});

querySelectorAll でパララックスを適用したい要素を取得し、new simpleParallax() に渡します。第二引数にオプションを指定してカスタマイズします。

オプション一覧

カスタマイズ例

ゆっくり動かす（ふんわり系）

new simpleParallax(images, {
  orientation: 'up',
  scale: 1.3,
  delay: 1.0,
  transition: 'ease',
});

複数の要素に異なるオプションを適用する

// 上方向に動く要素
var imagesUp = document.querySelectorAll('.parallax-up');
new simpleParallax(imagesUp, {
  orientation: 'up',
  scale: 1.2,
});

// 下方向に動く要素
var imagesDown = document.querySelectorAll('.parallax-down');
new simpleParallax(imagesDown, {
  orientation: 'down',
  scale: 1.3,
});

クラスを分けてそれぞれに new simpleParallax() を呼び出すことで、要素ごとに違う動きを設定できます。

躓きやすいポイント

画像がはみ出てしまう

overflow: false（デフォルト）の場合でも、親要素に overflow: hidden を指定していないと画像がはみ出ることがあります。パララックスを適用する要素の親に overflow: hidden を指定してください。

スマホでカクつく

パフォーマンスが気になる場合は delay を小さくするか scale を 1.1 程度に抑えると動きが軽くなります。また will-change: transform をCSSに追加するとGPUが使われてスムーズになることがあります。

画像が動かない

simpleParallax.jsが正しく読み込まれていない可能性があります。コンソールに simpleParallax is not defined と表示される場合はCDNのURLを確認してください。また querySelectorAll で取得する要素が存在しているかも確認してください。

まとめ

simpleParallax.jsはクラスを付けてJSを数行書くだけでパララックスが実装できる、導入コストが低くて使いやすいライブラリです。オプションを組み合わせることで動きの方向・速さ・遅延などを自由にカスタマイズできます。コーポレートサイトやLPにひと手間加えたいときにぜひ活用してみてください。

ご不明な点やコーディングのご依頼はお問い合わせからお気軽にどうぞ。