「simpleParallax」で簡単にパララックスを導入しよう！【サンプルコード付き】

そもそもパララックスって？？
「simpleParallax」を導入しよう
実際の見え方イメージ（マウススクロールに合わせて画像がずれます）
1. コード解説
「simpleParallax」のオプション一覧
まとめ

そもそもパララックスって？？

パララックス（Parallax）とは、「視差効果」のことを指します。

パララックスデザインとは、サイトに立体感や遠近感を持たせることでデザイン性が高まる表現方法の一つです。スクロールなどの動きに合わせて、スピードを変化させたり、アニメーションをつけたり、各要素の配置を変化させたりすることでサイトに動きを持たせます。

「simpleParallax」を導入しよう

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

CDNで読み込む場合は、上記コードをbodyの閉じタグ直前に貼り付けてください。

ファイルで読み込む場合はこちら (Github – simpleParallax.js）

『CODE』 → 『Download Zip』でファイルをダウンロードし、『dist』フォルダの中のファイルどちらかを使用してください。

※min～　は圧縮版

実際の見え方イメージ（マウススクロールに合わせて画像がずれます）

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

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

コード解説

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

HTMLで『parallax』（クラス名は任意）クラスをもっている部分を動かすイメージです。

orientationで動かす方向、scaleで動きの大きさ、delayで動きの遅延、transitionで動き方を設定できます。下でオプションに関して簡単にまとめています。

「simpleParallax」のオプション一覧

オプション名	タイプ	初期値	概要
orientation	String	up	up,right,down,left,up left,up right,down left,left right
scale	Number	1.2	1.0で変化しなくなり、数値が大きければ大きいほど変化が大きい。
overflow	Boolean	false	デフォルトでは画像がレイアウトからはみ出ない。trueにするとレイアウトからはみ出るようになる。
delay	Number	0.4	示唆効果が遅れて現れるようになる。
transition	String	‘cubic-bezier(0,0,0,1)’	delayとセットで設定。cssと同様にeaseなど設定可能。
customContainer	String or Node	“”
customWrapper	String	“”
maxTransition	Number	0	パララックスアニメーションを止める位置を設定「1」から「99」までのパーセントで指定