以前の記事で慣性スクロールの実装ができる「Luxy.js」をご紹介しました。

こちらのjsは一緒にパララックスも実装できて便利！ではあるのですが、条件によってはこの利点を活かしきれない時もあります。

例えば、このブログを書いているサイトでもLuxy.jsを使用しているのですが、スマホ時はLuxy.jsを無効にしています。
このjsでの慣性スクロールをスマホ時には動かしたくないからです。
スマホは慣性スクロールがすでに備わってることが多いようで、それと喧嘩してしまうのか？このjsを有効にしていると少し動きに違和感があったのでスマホ時は無効にしました。

そうなると、それに付随するパララックスもスマホ時には機能してくれませんよね・・・。
なので、別の方法でパララックスは動かさなくてはいけないなぁということになりました。

そこで！今回は簡単にパララックスを実装できる「simpleParallax.js」をご紹介します！
jQuery非依存なのも嬉しいところです。

パララックスをおさらい

簡単にパララックスをおさらいしておきましょう！

パララックスとは「視差効果」という意味で、奥行き感の演出を意味します。
画面をスクロールするとスクロール方向とは別方向に要素が動いたり、スクロールタイミングと要素がズレて動くことで、要素間に重なりや奥行き感が出るデザインのことを指します。

これによりコンテンツをより魅力的に見せたり、ユーザーの関心を引く効果が期待できます。

simpleParallaxを使ってみよう！

そんなパララックスを簡単に実装できるのが「simpleParallax.js」です！
jQuery非依存なのでjQueryを読み込んで〜というひと手間も省けるのもポイントですね。
配布しているサイト内にあるデモやコードも参考にできて助かりますね！

https://simpleparallax.com

まずは、simpleParallax.jsを読み込みましょう！

CDNで読み込み場合は、以下のコードをheadタグやbody閉じタグ直前に書けばOKです。

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

以前はGitHubからファイルをダウンロードして読み込むことも可能だったようですが、記事を書いてる時点（2025.09）ではファイルがなくなっているようです。
一時的かもしれないので、手元にファイルを落として読み込みたいという人は配布サイトからGitHubページに飛んで探してみるのもいいかもしれません。
以前は「dist」というディレクトリ内に「simpleParallax.js」や「simpleParallax.min.js」があったみたいですね。

これで準備はOKです！

パララックスを実装しよう！

実装には特に難しいことはありません！

パララックスしたいimgタグに任意のclass名を付けます。

<img src="画像のURL" alt="画像のalt" class="任意のclass名"/>

そしてjsに任意につけたclass名を入れた以下の記述を追加します。

<script>
　//任意のclass名クラスのついた要素を定数「image」に格納
  const image = document.getElementsByClassName(‘任意のclass名’);
  new simpleParallax(image);
</script>

constのところで任意のclass名を「 image」に格納しています。
つまり、この処理で「任意のclass名＝image」になりました。
「const」の部分は配布サイトでは「var」になってるのでこちらでも大丈夫そうです。

そして「new simpleParallax」で「image」を実行しています。
なのでconst以下とnew simpleParallax以下の名称は同じになることにご留意を！
この「image」も任意でつけられるので好きなように変更してくださいね。

これでデフォルトのパララックスの動きをしてくれます。

視差効果の方向や大きさを変えるなどのオプションを使いたい場合は以下のような記述になります。

<script>
  const image = document.getElementsByClassName(‘任意のclass名’);
  new simpleParallax(image,{

　// ※ここにオプションを記述

  });
</script>

オプションについて

オプションは９種類ありますが、そのうち３種類はVanillaバージョンのみ対応です。
今回はよく使う６種類をご紹介します！

■ orientation（視差効果の方向）
デフォルト：up
設定できる値：up / right / down / left / up left / up right / down left / left right

■ scale（視差効果の大きさ）
デフォルト：1.4
設定できる値：1.0以上で設定

■ overflow（画像がレイアウトからはみ出すかはみ出さないか）
デフォルト：false（初期値でははみ出さない）
設定できる値：trueに変更可

■ delay（視差効果の遅延）
デフォルト：0.4
設定できる値：秒単位で指定

■ transition（アニメーションの始まりや終わりの緩急）
デフォルト：cubic-bezier(0,0,0,1)
設定できる値：任意のCSSトランジションを設定（ease や ease-in-outも指定できる）
delayと併用することが多い。

■ maxTransition（アニメーションを止める位置）
デフォルト：0
設定できる値：1〜99で指定

以下のように使用したいオプションを入れてカスタマイズしてみましょう！

<script>
  const image = document.getElementsByClassName(‘任意のclass名’);
  new simpleParallax(image,{
　　orientation:'right',
　　delay: '3.0',
　　scale: '1.5'
  });
</script>

実際の使用例

このサイトでsimpleParallaxを実際に使用している部分があります。

・TOPページのスマートフォン画像と時計の画像
・一部の背景画像

で使用しています。
スクロールから遅延して背景画像、スマホ画像が動きます。
サイトTOPを参考に見ていただけるとわかりやすいかなと思います。

TOPページで両方使っている箇所があるのでそこのコードを参考にご紹介。

まず、この部分のhtmlは以下の通りです。

<div class="company_policy">
  <div class="bg_parallax">
    <img class="bg_parallax_inner" src="assets/img/bg_parallax.gif" alt="company_bg">
  </div>
  <div class="block--inner">
    <h3 class="section--tit mask_tit" data-delighter>
      <span>
        <span class="initial_color">T</span>he world <br class="sp">beautiful<br>with creativity
      </span>
    </h3>
    <p class="tit_sub">
      クリエイティブで、世界を美しく！
    </p>
    <p class="txt">
      想像したものを創造に変えるクリエイティブ力。<br>
      素敵な企業やサービスであふれているなか、その魅力を伝えられないと人との繋がりが絶たれてしまいます。<br>
      便利だけど「使いづらい」「わかりづらい」「かっこわるい」など見た印象で会社やサービスの信頼性を失います。<br>
      ワクワクしたり、ドキドキしたり、景色が変わるようなクリエイティブを目指しています。
    </p>
  </div>
  <div class="deco_img">
    <img class="parallax_img" src="assets/img/smartphone.png" alt="smartphone">
  </div>
</div>

背景画像の部分のimgには「bg_parallax_inner」という任意のclass名をつけています。
absoluteで位置を固定したかったので、divでimgを包んでいます。
動きのない背景なら、親の「<div class=”company_policy”>」にcssでbackground-imageで指定すればいいのですが、今回はパララックスにするのでimgタグで背景を置いています。

<div class="bg_parallax">
  <img class="bg_parallax_inner" src="assets/img/bg_parallax.gif" alt="company_bg">
</div>

スマートフォン画像のimgには「parallax_img」という任意のclass名をつけています。
こちらもabsoluteで位置を固定したかったので、divでimgを包んでいます。

<div class="deco_img">
  <img class="parallax_img" src="assets/img/smartphone.png" alt="smartphone">
</div>

そしてjsは以下のように書いています。
「bg_parallax_inner」は「bg_image」、「parallax_img」は「image」にそれぞれ格納しています。
このように違うオプション設定でパララックスを置くこともできます。

  const bg_image = document.getElementsByClassName('bg_parallax_inner');
  const image = document.getElementsByClassName('parallax_img');
  new simpleParallax(bg_image, {
    delay: 1.2,
    transition: 'cubic-bezier(0,0,0,.1)'
  });
  new simpleParallax(image, {
    scale: 1.4,
    delay: 2.2,
    transition: 'cubic-bezier(0,0,0,.1)'
  });

simpleParallaxは簡単でおすすめ！

今回はsimpleParallaxの使い方や使用例をご紹介しました！
jQuery非依存で実装も簡単にできるのでおすすめです！
ぜひご活用してみてください。