長いスクロールサイトは本当に一般的なWebデザインのトレンドになりました。 これの最もクールなサブタイプの1つは、視差効果を放つために画像が移動する視差スクロールサイトです。 ユーザーがページを下にスクロールすると、アニメーションが開始され、全体的に正しく実装されていれば、Webサイトの外観が一新されます。
視差スクロールサイトを作成するのは、CSS、Javascript、および優れたWebデザインに関する深い知識が必要となるため、面倒です。 これは、視差スクロールサイトを簡単に作成できるだけでなく、見栄えの良いWebページを簡単にすばやく作成できるように、優れた視差効果ライブラリを備えている、 Best Parallax Scrolling Pluginsのリストです。 。
免責 事項 ： 始める前に、これらのプラグインを使用するには、Webテクノロジ（HTML / CSS / Javascript）に関するある程度の知識が必要です。 リストされているプラグインのほとんどはjqueryを利用しているので、Jqueryの知識も必要かもしれません。
視差スクロールプラグイン
1. ScrollMagic
ScrollMagicは、最も人気があり機能豊富なjqueryプラグインの1つです。 それはJavascriptライブラリですあなたは一見魔法のようなスクロール効果を作成することができます。 ScrollMagicを使用すると、あなたのスクロール位置に基づいてアニメートすることができます。 つまり、HTML要素をスクロールしながら、好きな時間に固定、移動、またはアニメーション化したり、Webサイトに視差効果を簡単に追加したりできます。 それは高度にカスタマイズ可能でありそしてまた軽量である（gzipされたとき6kb）。 他の視差スクロールプラグインの中で、Scroll Magicは最高のドキュメンテーションと外部リソースを持っています。 モバイルとも完全に互換性があります。
ScrollMagicにはたくさんの例がリストされています。 このライブラリを使用する上でのインスピレーションと手引きについては、それらをチェックしてください。
約：
ホームページ：//janpaepke.github.io/ScrollMagic/
作成者：Jan Paepke
インストール：
1. CDN：
2. Githubからダウンロードする
2.スクローラ
skrollrは軽量の純粋なJavascriptとCSSのライブラリで、jQueryは含まれていません。 それは基本的に「CSS用に簡略化されたスクロールマジック」です。 skrollrを使うためには、JavascriptやjQueryを知っている必要はありません。 HTMLとCSSだけで十分です。 skrollrはデータ属性を使用して、必要なHTML要素をアニメートします。 skrollrの主な欠点の1つは、ページがスクロールされている間だけアニメーションが機能することです。 それ以外の場合、すべての効果は保留されます。 skrollrを使用すると、HTML要素のすべてのCSSプロパティをアニメートできます。
約：
ホームページ：//prinzhorn.github.io/skrollr/
作成者：Prinzhorn
インストール：Githubからダウンロード
3. pagePiling.js 
Page Pilingは、Webページをさまざまなセクションに重ねて積み重ねることができるjQueryプラグインです。 スクロールすると、またはURLにアクセスすることで、各セクションはきれいなスライドアニメーションで表示されます。 pagePiling.jsは、デスクトップ、タブレット、モバイルのすべてのプラットフォームと互換性があり、ほとんどのブラウザで動作します。 それはそのアニメーションをサポートしていない古いブラウザ（グーグル7のような）の上品に劣化します。 プラグインを使用するには、HTML内にCSSとJavascriptファイルを含める必要があります。 pagePiling.jsは（document）.ready関数によって初期化されます。
$( document ).ready( function () {
$( ' #pagepiling ' ).pagepiling();
});
より高度な初期化のために、README.mdを通過してください。
約：
ホームページ：//alvarotrigo.com/pagePiling/
作成者：alvarotrigo
インストール：Githubからダウンロード
4.アルトン
AltonはjQueryの「私たちへのスクロールジャッキ」プラグインです。 スクロールジャッキングとは、（マウスホイールまたはタッチパッドによって）開始されたときに、画面の次の垂直方向のポイント、または次のコンテナの上部に移動するターゲットスクロールのために、ブラウザのネイティブスクロールが無効になることを意味します。
Altonは、 'Hero'、 'Bookend'、および 'Standard'と呼ばれる3種類の機能を使用できます。 標準では、100％の高さの各セクションで、フルページスクロールを使用できます。 スクロールすると、次のセクションまたは前のセクションが表示されます。 Bookendはあなたがブックエンドのような経験を作成することを可能にしますが、Heroは 'Hero'セクションだけをスクロールジャックすることができ、残りのページは（再び有効にされた）ネイティブスクロールを持ちます。
約：
ホームページ：//paper-leaf.com/alton-jquery-scroll-jacking-plugin/
作成者：paper-leaf
インストール：Githubからダウンロード
5. Stellar.js
Stellarは、あなたが簡単に視差スクロール効果を加えることができるjQueryプラグインです。 実行するには、まず$ .stellar（）関数を実行する必要があります。 個々の要素のアニメーション設定は、その要素のデータ属性を使用して構成できます。
Stellarはあなたが視差の背景を持つことさえできます、そしてそれはスクロールの上に再配置される背景です。 Stellar.jsの最も便利な機能の1つはオフセットです。
オフセットの親が画面の端に達すると、すべての要素は元の位置に戻ります - 独自のオプションのオフセットをプラスまたはマイナスしたもの。 これにより、複雑な視差パターンを非常に簡単に作成できます。 （恒星のドキュメンテーション）
約：
ホームページ：//markdalgleish.com/projects/stellar.js/
作成者：Mark Dalgeish
インストール：Githubからダウンロード
6. multiScroll.js
このプラグインは、pagePiling.jsプラグインを作成したのと同じ開発者（alvarotrigo）によって作成されました。 マルチスクロールが基本的に行うことは、各ページセクションが2つの部分に分割されてロードされ、ページがロードされるときに所定の位置にスライドするという効果を作成できることです。 あなたのブラウザ上でこれがどのように見えるかを見るためにホームページをチェックしてください。 multiScroll.jsを使用すると、スクロール速度、イージング、キーボードスクロールオプション、およびその他多くのプロパティを設定できるので、必要に応じて効果をカスタマイズできます。
約：
ホームページ：//alvarotrigo.com/multiScroll/
作成者：alvarotrigo
インストール：Githubからダウンロード
7. ScrollMe
ScrollMeはあなたのページに簡単な視差スクロール効果を加えるためのプラグインです。 下にスクロールすると、ページ上の要素の拡大縮小、回転、移動、不透明度の変更ができます。 ScrollMeはJavascriptを必要とせず、CSSの知識だけで十分です。 「animateme」クラスと必要なデータ属性を追加することで、任意のHTML要素をアニメートすることができます。 ScrollMeはCSS効果を追加するために最もよく使われます。 それは軽量であり、あなたが適度にそれらを使用する限り、すべてのアニメーションは滑らかです。
約：
ホームページ：//scrollme.nckprsn.com/
作成者：Nick Pearson
インストール：Githubからダウンロード
8.視差スクロール
Parallax Scrollは使いやすいjQueryプラグインで、Spotifyのようなサイトで見られる視差画像スクロール効果を作成することができます。 使い方はとても簡単です。イメージホルダーに必要なCSSクラスを指定するだけです。 ではなく このプラグインを使用するには、（background-image` CSSプロパティを使用して）背景画像を指定した要素を使用する必要があります。CSSの@mediaクエリを使用して要素をレスポンシブにすることができます。
約：
ホームページ：//parallax-scroll.aenism.com/
作成者：Aen
インストール：Githubからダウンロード
9.ジャララックス
Jarallaxは視差スクロール効果を専門とするCSSおよびJavascriptライブラリです。 JarallaxはJavascriptを使用して設定されています（jQueryなし、純粋にvanilla JS）。 スムーズスクロール機能、イージング、視差アニメーションをサポートしています。 Jarallaxは、プラットフォームを問わず、ほとんどのブラウザでサポートされています。 Jarallax Webサイトには、ニーズに合わせてJarallaxをカスタマイズする方法に関する優れた資料があります。 Jarallaxには、Webサイト用にJarallaxを設定する方法と始める方法を示すビデオチュートリアルもあります。
約：
ホームページ：//www.jarallax.com/
作成者：Jarallax
インストール：Jarallax Webサイトからダウンロード
10.スーパースクロール
SuperscrolloramaはスクロールアニメーションをサポートするjQueryベースのプラグインです。 TweenMaxとGreensock Tweening Engineが搭載されており、アニメーションのパフォーマンスと滑らかさが向上します。 スーパースクロールアニメーションはjQueryを介して呼び出されます。また、TweenMax.jsのほとんどの関数も使用できます。 残念ながら、これらのアニメーションはモバイルデバイスでは完全にはサポートされていません（タッチスクリーンデバイスは異なる方法でスクロールを処理するため）。 ただし、setScrollContainerOffsetメソッドを使用すると、モバイルデバイス上でSuperscrollorama効果にアクセスできます。
これを行うためのコードは次のとおりです。
.setScrollContainerOffset(x, y)
（x：スクロールコンテナのxオフセット、y：スクロールコンテナのxオフセット）
約：
ホームページ：//johnpolacek.github.io/superscrollorama/
作成者：johnpolacek
インストール：Githubからダウンロード
関連項目：10のベストスタティックサイトジェネレータ
