![見出し画像](https://assets.st-note.com/production/uploads/images/128183219/rectangle_large_type_2_0ee1d57c8ee30620d5fdcd356502f3e0.jpeg?width=1200)
JavaScriptおすすめパララックスプラグイン11選
パララックス(視差効果)演出といっても上下左右スクロールや回転等様々な演出がありますが、その中でJavaScriptおすすめパララックスプラグイン11選を紹介します。
simpleParallax.js
シンプルにパララックス演出を実装できます。
simpleParallax.jsを使ってシンプルにパララックスを実装し表示する方法
ScrollMagic.js
パララックスとページスクロールと連動したアニメーションを表示できます。
ScrollMagic.jsを使ってパララックスとページスクロール連動アニメーションを表示する方法
Rellax.js
jQuery不用で簡単にパララックスを実装できます。
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を使ってパララックス(Parallax)な演出で表示する方法
ScrollTween.js
コンテンツエリア内のマウスホイールのスクロール量によってパララックス演出を実装できます。
ScrollTween.jsを使ってマウスのスクロールでアニメーションさせる方法
最後に
これらのプラグインは、パララックス演出を実装するための選択肢の一つです。
プロジェクトの要件やデザインに合わせて最適なプラグインを選んでください。
また、使用する際には公式ドキュメントを参照して適切に設定やカスタマイズを行うことをおすすめします。
※流用される場合は自己責任でお願いします。
この記事が気に入ったらサポートをしてみませんか?