無料・商用利用可のJavaScript、jQueryプラグインのまとめ 
無料・商用利用可のJavaScript、jQueryプラグインのまとめ
スクロール位置を示すプログレスバーがヘッダーに表示されます。
スクロールに合わせて複数のヘッダーデザインを切り替えることができるjQueryプラグイン。
ページ内リンクをidだけでなくclassなどでの指定可能。スクロール速度の変更もできます。
スクロールでdiv要素ごとにスライドのようなページ送りができるjQueryプラグイン
シンプルにパララックス効果を実装できるjQueryプラグイン
1ページコンテンツ用のスクロールを実装するjQueryプラグイン。垂直、水平にスクロールします。
スクロールした後、ナビゲーションを上部に固定します。1ページサイト用のナビゲーションとしても使えます。
スクロールに合わせ読むのに後何分かかるかを表示します。
縦長のページの途中に横スクロールする水平コンテンツを配置するjQueryプラグイン。キーボードの矢印キーで操作可能。ナビゲーションがあるので今ページのどこを見ているのかわかりやすい。
イメージの配置も可能。映画のスタッフロールのような演出ができます。
TwitterやFacebookのような無限スクロールのページが作成できるjQueryプラグイン。
スクロールすると、各要素がさまざまな方向・アニメーションで表示されます。デモサイトのように、時間の経過を分かりやすく表示するタイムラインのような表現ができます。
指定したdiv要素などの要素までスクロールすると、設定したスタイルが適用されます。jQuery1.7.0以上を使用します。
スクロールすると画像が立体的に表示することができます。１ページサイトに少し動きをつけたいときに使いたいですね。
スクロール系で使用したいエフェクトは一通り揃っているプラグインです。レスポンシブ対応もしています。
ユーザがページをどのくらいスクロールしたか、スクロールして表示されるまでにどのくらいかかったか、などをGoogleAnalyticsで解析できます。
スクロールしていくと、見やすい位置にきたヘッダーのコンテンツが表示されます。現在見ている位置より上のヘッダーは固定されていき、どんな内容があったか確認ができるため、縦長ページに最適です。
数字をクリックすると下にある補足説明の場所まで自動でスクロールされます。実装もお手軽でspanに囲まれた場所が脚注になります。
スクロールに合わせてアニメーションさせるスクリプト。左右からスライドインしたり、上から降りてきたり、様々な動きを設定することができます。
「デモサイト」ボタンのリンク先は基本動作のデモページです。それぞれの動きのデモページは「ダウンロードページ」の【Example Usage】よりご確認ください。
data-scrollrevealでアニメーションを制御します。JavaScriptやスタイルシートに記述するのではなく、data-scrollrevelにルールに沿った文字列を記述します。
スクロールに応じてエフェクトを追加するには要素に対しclass等を付けるだけです。
スクロールすると、ナビゲーションメニューがアニメーションしながら隠れ、代わりにメニューの位置を示す要素が表示されます。上にスクロールするとナビゲーションメニューが再表示されます。 特定のライセンス形態はとっていないようで […]
スクロールするとカーテンが上がるような動きを実装できます。スクロールだけでなく、キーボードの矢印キーでも動きがスムーズです。
ページ内で「するすると」移動する、気持ち良いスクロールを出来るようにするjQueryプラグイン。 スムーススクロールを実装できるものはこれ以外にも色々ありますが、選択肢の一つにいかがでしょうか。
ページの先頭へ戻るボタンを設置できます。どのくらいスクロールしたら表示させるか、表示する時のアニメーション、ページの先頭に戻るスピードなどを指定することができます。デザインのCSSが4パターン用意されています。
複数のパネルを垂直方向に配置して1ページのスクロールページを作成できます。
スクロールによってコンテンツがダイナミックに変化していくのはとても格好よく、スタイリッシュです。
アニメーションスクロールをデフォルト化できるプラグイン。一瞬で飛んでしまうスクロールより便利なので、デフォルト化してしまうのも一つの手かもしれません。 アニメーションの速度やスクロール位置のオフセット、アニメーションエフ […]
さまざまな動き（エフェクト効果）を指定することが可能です。エフェクトの一覧は下記サイトから確認することができます。Easing function
パノラマ画像をスクロールして360度表示するjQueryプラグイン。スクロール開始位置、スクロールスピード、スクロール方向(左右のみ)などの調整が可能です。 ※スマートフォンでの閲覧はできますが、ドラッグによる表示位置を […]
