パララックス(視差効果)演出といっても上下左右スクロールや回転等様々な演出がありますが、その中でJavaScriptおすすめパララックスプラグイン12選を紹介します。
simpleParallax.js
シンプルにパララックス演出を実装できます。
simpleParallax.jsでのパララックス実装!
ScrollMagic.js
パララックスとページスクロールと連動したアニメーションを表示できます。
ScrollMagic.jsで実現!パララックスとスクロールアニメーションの組み合わせ技術解説
Rellax.js
jQuery不用で簡単にパララックスを実装できます。
Rellax.jsで簡単にパララックス効果を実装する方法
SUPERSCROLLORAMA
ページ内のコンテンツをパララックスや色々なエフェクト演出で表示できます。
jquery.superscrollorama.jsで実現するパララックスエフェクトとアニメーション
Jarallax
下スクロールでページ背景にパララックスを実装できます。背景にYouTube動画も設定できます。
下スクロール時の背景パララックス実装ガイド: jarallax.jsを活用した方法
Vanilla-tilt.js
パララックス系プラグインは縦または横スクロールに合わせてパララックス演出が多いですが、vanilla-tilt.jsはマウス操作に合わせたパララックスを実装できます。
vanilla-tilt.jsを使って要素にパララックス(視差効果)を実装する方法
lax.js
ページを下にスクロールするとコンテンツがくるくる回る演出を表示できます。
lax.jsを活用してプロレベルのパララックス効果を実装する手順
skrollr
スクロールすると円が弧を描いて移動するパララックス演出を表示できます。
skrollr.jsで実現!初心者でもできるスクロールに反応するパララックス効果の作り方
jInvertScroll
複数画像を横スクロールでパララックス演出表示できます。
jquery.jInvertScroll.jsを使ってパララックスで横スクロールする方法
jquery.Parallax.js
縦長ページを下スクロールでイイ感じにパララックス演出を実装できます。
jQuery Parallax.jsでパララックス効果を実現する方法
ScrollTween.js
コンテンツエリア内のマウスホイールのスクロール量によってパララックス演出を実装できます。
ScrollTween.jsを使ってマウスのスクロールでアニメーションさせる方法
Luxy.js
luxy.jsは、スクロールに応じて要素を動かすパララックス効果を簡単に実装できる軽量なJavaScriptライブラリです。
luxy.jsを使ったスクロールパララックス演出
これらのプラグインは、パララックス演出を実装するための選択肢の一つです。
プロジェクトの要件やデザインに合わせて最適なプラグインを選んでください。
また、使用する際には公式ドキュメントを参照して適切に設定やカスタマイズを行うことをおすすめします。
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。