クールスクロール効果のためのJavaScriptライブラリ

Webサイトのデザインは、うまく実行されたアニメーションによって実現します。プロジェクトに効果を追加するための適切なライブラリを探しているなら、ここでいくつかのライブラリのリストを作りました。 scrollイベントに基づいて効果を出すために使用できます.

ユーザーがWebページを下にスクロールすると、アクションは さまざまなアニメーションオプションを起動するように設計できます。 フェード効果、ぼかし、3D、視差など。ここには25のJSライブラリーがあり、サイト設計でそのような応答を達成するのに役立ちます。.

スクロール表示

Webとモバイルの両方にスクロールアニメーションを簡単に追加できるライブラリです。あなたがアニメートしたい要素にカスタムイージング、3D回転、継続時間と多くのmorパラメータを設定することができます.

依存関係： なし サイズ： 2.9kb | ライセンス： MIT

アニビュー

あなたの要素がビューポートに入ったときだけアニメーションを有効にするためにAnimate.CSSと連携するプラグイン.

依存関係： jQuery | サイズ： 1kb | ライセンス： 該当なし

ビューにフェードイン

所定のビューポートに出入りするときに要素にフェードイン/アウト効果を追加するプラグイン.

依存関係： jQuery | サイズ： 3.81kb | ライセンス： 該当なし

ワオ

WOWはスクロールイベント時にAnimate.cssアニメーションを表示します。 HTMLのマークアップからアニメーションの長さ、遅延、オフセット、繰り返しを設定してから、JSから要素のクラスを呼び出すだけで済みます。.

依存関係： Animate.css | サイズ： 8.23kb | ライセンス： MIT

ScrollMagic

このプラグインは、ユーザーがページをスクロールしたときに「魔法のような」効果を示します。スクロール位置に基づいて、アニメーション化、要素の固定、CSSクラスの切り替えに最適です。 ScrollMagicは、GSAPやVelocityJSと連携してアニメーションシーンを作成することができます。ここで完全なデモを見る.

依存関係： jQuery、GSAP、Velocity.js |サイズ： 16.9kb | ライセンス： MIT

jスクロール性

jScrollabilityを使用すると、複雑なスクロールベースのアニメーションを使用して単一のWebページを作成できます。ユーザーがスクロールすると、要素はスクロール位置に基づいてアニメーション化されます。アニメーションはスクロールの深さに基づいて実行されます。もちろん、アニメーションの開始と終了を設定できます。.

依存関係： jQuery |サイズ： 1.86kb | ライセンス： MIT

pushIn.js

ユーザーがページをスクロールしたときに機能する任意の要素にドリーインまたはプッシュイン効果を追加するための単純なライブラリ。実装は簡単です。単にstart、stop、speedの各パラメータを追加するだけです。 データパラメータ あなたのHTML要素に.

依存関係： 無し |サイズ： 4.94kb | ライセンス： 該当なし

スクレリッシモ

これはスムーズなスクロールコントロールのアニメーションを追加するためのJSライブラリです。 Greensockのトゥイーンとタイムラインを利用して滑らかなアニメーションを生成します。.

依存関係： GreenShock TweenLite / TweenMax |サイズ： 2.94kb | ライセンス： 該当なし

jQueryアニメーションスクロールプラグイン

これはGreensockを使用してビューポートトリガーアニメーションを追加するためのjQueryプラグインです。イージング、変形、拡大縮小、回転、3Dアニメーションを使用して要素を簡単にアニメートできます。.

依存関係： jQuery、GreenShock |サイズ： 14kb | ライセンス： GNU GPL

サークル

Circlrを使用すると、スクロール、マウスイベント、またはタッチイベントをトリガーとして、要素に対する回転アニメーションを作成できます。ユーザースクロールでアクティブにして、360度すべてから見ることができる製品のショーケースを作るのに最適です。.

依存関係： 無し |サイズ： 6.05kb | ライセンス： MIT

Scrollimator

Scrollimatorは位置とスクロールの進行状況を表示し、ユーザーのスクロール動作に付随するトゥイーンアニメーションを変更するために使用できる値を返します。垂直方向と水平方向のスクロールをサポート.

依存関係： 無し |サイズ： 37.7kb | ライセンス： 該当なし

クロスフェード

クロスフェードは、クロスフェード効果を画像に追加するためのプラグインです。ユーザーがさらに下にスクロールしてもぼやけた効果が持続します.

依存関係： jQuery |サイズ： 3.19kb | ライセンス： MIT

ページスクロール効果

これはCodyHouseによって作成された実験的なページスクロール効果のためのライブラリです。利用する velocitey.js アニメーション.

依存関係： jQuery、Velocity.js |サイズ： 17.6kb | ライセンス： 該当なし

jquery.parallax-scroll

このライブラリを使用すると、縦方向のページスクロールにスムーズな視差効果を追加できます。 jQueryとjquery.easing.1.3.jsをインポートしてから、 「データ視差」 効果をカスタマイズするためのあなたの要素への属性とオプションのpatameter.

依存関係： jQuery、jQuery.easing |サイズ： 8.72kb | ライセンス： GNU GPL

parallax.js

Parallax.jsはSpotifyのウェブサイトに触発された視差スクロール効果を追加するシンプルなプラグインです。.

依存関係： jQuery |サイズ： 6.63kb | ライセンス： MIT

エンラックス

Enllaxは視差効果をあらゆるスクロール要素に適用するのに使用するための超軽量ライブラリです。背景や前景の要素を設定して、効果を高めることができます。垂直方向と水平方向の両方のスクロールに機能します。.

依存関係： jQuery |サイズ： 1.53kb | ライセンス： MIT

スクロールをぼかす

このライブラリは、ページスクロールによって引き起こされる画像にぼかし効果を追加するのに役立ちます。ページを下にスクロールすると、画像がぼやけます。.

依存関係： 無し |サイズ： 1.1kb | ライセンス： 該当なし

boxLoader

boxLoaderはページスクロール時に要素をロードするためのシンプルなプラグインです。あなたが設定すべきパラメータは方向（xまたはy）、パーセントの位置、効果そして持続時間です。.

依存関係： jQuery |サイズ： 3.42kb | ライセンス： 該当なし

傾斜ページスクロール

ユーザーがページをスクロールすると、このプラグインはあなたが設定した要素にすごい3D傾斜効果を見せるでしょう.

依存関係： jQuery |サイズ： 1.5kb | ライセンス： GNU GPL

AhRelax

AhRelaxはスクロールベースのアニメーションをすばやく作成する方法を提供します。軽量で優れた性能を発揮します。あなたはそれについてもっと読むことができます.

依存関係： jQuery |サイズ： 1.6kb | ライセンス： MIT

ファンシースクロール

AndroidまたはiOSでオーバーフロースクロール効果が発生したことがある場合は、このプラグインを使用してこれをサイトに適用できます。ユーザーがページの上部/下部に到達したときに、バウンスまたはグローのいずれかのアニメーションを追加できます。.

依存関係： jQuery |サイズ： 2.64kb | ライセンス： GNU GPL

視差画像スクロール

このプラグインは、ユーザーがページを上下または下にスクロールすると、要素を浮遊させて移動させます。.

依存関係： jQuery |サイズ： 8.69kb | ライセンス： MIT

ルーススムース

これは、ユーザーがページをスクロールダウンまたはスクロールアップしたときに流れるような効果を生み出すための小さなプラグインです。スライド、フェード、ショーの3つの効果があります。.

依存関係： jQuery |サイズ： 1.95kb | ライセンス： MIT

巻物

拡大縮小、回転、移動、要素の不透明度の変更など、ページのスクロールに簡単な効果を追加します。セットアップは簡単です。jQueryとこのプラグインをインポートし、要素のマークアップにアニメーションパラメータを設定するだけです。.

依存関係： jQuery |サイズ： 5.45kb | ライセンス： 該当なし

視差画像スクロール

このプラグインを使用すると、ページ上の任意の画像に視差効果を加えることができます。それは効果を働かせるためにCSS3変換を利用します。このプラグインはjQueryとAMDをサポートしています.

依存関係： jQuery |サイズ： 8.01kb | ライセンス： MIT