毎年末にjQueryのプラグインをまとめていましたが、今年はプラグインの他に単体で動作するスクリプトも加えて、jQueryのプラグインとスクリプトの総まとめとして記事にしました。
今年目立ったのは、去年から引き続きアニメーション系、縦長ページ用のスクリプトでしょうか。
1カラムのレイアウトが流行っているためか背景関連も充実していました。それとSVGをより簡単に利用できるようになったのも大きな目玉ですね。
また、jQueryに依存しない、単体で動作するスクリプトも多く開発されるようになったと思います。
1カラムのレイアウトが流行っているためか背景関連も充実していました。それとSVGをより簡単に利用できるようになったのも大きな目玉ですね。
また、jQueryに依存しない、単体で動作するスクリプトも多く開発されるようになったと思います。
各スクリプト名の後にある「プ」はjQueryのプラグイン、「単」は単体で動作するスクリプトです。
背景関連
-
- （単）
- 背景にCanvasで描いた粒子でできたような幾何学状のアニメーションを簡単に実装できます。
-
- （プ）
- ヘッダやコンテンツの背景に、Canvasで描かれた幾何学模様をパララックスエフェクトでアニメーション表示します。
-
- （プ）
- .mp4, .webm などの動画をブラウザいっぱいやセクションの背景として配置できます。
-
- （プ）
- .mp4, .webm などの動画をブラウザいっぱいやセクションの背景として配置できます。
SVG関連
-
- （単）
- パネルのホバー時、ボーダーにキランと光るようなかっこいいアニメーションを適用します。
-
- （単）
- SVGを使った滑らかで美しいアニメーションのプログレスバーを簡単に実装できます。
-
- （単）
- ページのローディング時に、かっこいいさまざまなSVGのアニメーションを与えます。
-
- （単）
- SVGで画像にさまざまなエフェクトあたえたり、ちょっとしたインタラクションを伴ったアニメーションを手軽に実装できます。
-
- （単）
- Adobe社製のSVGを使ったさまざまなコンテンツを実装できるJavaScriptライブラリ。
-
- （プ）
- ページ上の画像や背景画像として使用したSVG画像をSVG非サポートブラウザで表示した際にPNG画像に自動変換します。
-
- （単）
- SVGを使ってアイコンが次々と変わるモーフィングを楽しめるスクリプト。
-
- （プ）
- SVGでイラストなどのラインをパスに沿ってアニメーションで描きます。
縦長ページ関連
-
- （プ）
- セクションごとにフルスクリーンでコンテンツを表示させる縦長スクロールページを作ります。
-
- （プ）
- ロゴやヘッダなどをスクロール時に固定表示し、スクロールして表示されたコンテンツに応じて、固定エレメントのスタイルシートを変更させて表示します。
-
- （プ）
- 垂直に配置した複数のパネルをブラウザいっぱいに表示し、CSS3のかっこいいアニメーションでスクロールさせます。
-
- （プ）
- 縦長ページをスクロールする時にちょうどいい位置にスナップさせます。
-
- （プ）
- 縦長ページをスクロールする時にちょうどいい位置にスナップさせます。
-
- （プ）
- 特定の要素がビューポートにあるかどうかを調べ、ビューポートに入ったらスタイルシートを適用できます。
スクロール連動・パララックス関連
-
- （単）
- 最近よく見かける縦長ページ用のさまざまなアニメーションが簡単に実装できます。
-
- （プ）
- スクロールしてビューポートに要素が表示された時に、さまざまなアニメーションを適用します。
-
- （プ）
- パララックスのエフェクトで、コンテンツが指定位置の時はくっきり表示させ、スクロールしてフォーカスが変わる時にぼやけた感じになります。
-
- （単）
- スクロール時に各要素をさまざまなアニメーションで表示させます。
-
- （単）
- ページを表示した時やスクロールした時など、ページ上の要素がビューポートに表示された時に各要素にさまざまなアニメーションをセットします。
-
- （単）
- 垂直・水平のパララックスやカーテンのエフェクトが実装できます。
-
- （プ）
- 要素や背景をスクロールに合わせてアニメーションさせます。
-
- （プ）
- スクロール時にさまざまな楽しいエフェクトを与えます。スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、div要素の内側のスクロールなどにも対応しています。
-
- （プ）
- ページをスクロールすると、パララックスのエフェクトで次々に画像とコンテンツをカーテンを引き上げるように表示します。
その他スクロール操作・補助関連
-
- （プ）
- コンテンツをスクロールするとスワイプのように次々にアニメーションで表示します。
-
- （プ）
- ヘッダやナビゲーションなどを下にスクロールした時には隠し、上にした時に表示します。
-
- （プ）
- ページを下方向だけでなく、上（マイナス）や横にも増やし無限スクロール対応にします。
-
- （プ）
- スマフォでスクロールした時の一番上と下ではずむようなエフェクトをデスクトップでも再現させます。
レスポンシブ関連
-
- （プ）
- 画像やテキスト、テーブル、iframeのGoogleMapsやYouTubeなど、コンテンツを表示サイズに応じて自動で最適化します。
-
- （プ）
- 画像をデスクトップではそのまま表示し、スマホやタブレットなどでは指定した箇所を中心にクロップして表示します。
ナビゲーション関連
-
- （単）
- メニューをサイドやトップ・ボトムから気持ちいいアニメーションで表示させるOff Canvas Menuのかっこいいエフェクトのまとめ。
-
- （プ）
- コンテンツを押し出すようにナビゲーションをスライド表示します。
-
- （プ）
- レスポンシブ対応で、多階層のナビゲーションを作成します。
-
- （プ）
- ページ内のどのコンテンツにいるか表示してくれるナビゲーション。
レイアウト関連
-
- （プ）
- サイドバーを左右どちらからでもアニメーションでスライドさせるシンプルなスクリプト。
-
- （プ）
- 縦長ページで構造に合わせて水平コンテンツをうまくレイアウトします。
-
- （プ）
- 異なる高さを単に揃えるだけでなく、グルーピングや列に応じて揃えることも可能です。
-
- （プ）
- レスポンシブ対応で、高さの異なるパネルを揃えたり、成り行きにすることができます。
-
- （プ）
- レスポンシブ対応のナビゲーションやコンテンツを横から表示します。
-
- ダイアモンド状にコンテンツを配置します。
コンテンツ生成・ツアー関連
-
- （単）
- インタラクション満載の路線図を実装します。
-
- （プ）
- 日本の都道府県の地図をクリッカブルマップで表示する純国産のスクリプト。
-
- （単）
- スケジュールの横軸と各アイテムを定義するだけでタイムスケジュールシートを簡単に作成できます。
-
- （プ）
- シンプルなHTMLをアニメーションで開閉するアコーディオンにします。
コンテンツ紹介・ツアー関連
-
- （単）
- ページの使い方をアニメーションで表示します。
-
- （プ）
- ページの使い方をアニメーションで表示します。
-
- （プ）
- 注目してほしい箇所をアニメーションでくるっと囲みます。
スライダー・カルーセル関連
-
- （プ）
- デスクトップ、スマホ、タブレットの表示・操作に対応したさまざまなスライダーが実装できます。
-
- （単）
- アイテムを浮かせて斜めにスライドさせるコンテンツスライダー。
-
- （単）
- レスポンシブ対応でタッチデバイス対応、CSS3のアニメーションがかっこいい画像スライダー。
-
- （プ）
- divなどで実装したパネル、複数の画像やエレメントを配置したスライダーなどにさまざまなアニメーションを適用できます。
-
- （プ）
- 画像やコンテンツを配置したパネルを次々に水平・垂直にスライドして表示するカルーセルのスクリプト。
-
- （プ）
- 画像を雑誌をめくるように3Dで次々に表示します。
画像拡大・配置・キャプション関連
-
- （単）
- クリックでもタップ快適動作で画像を拡大表示させるLightboxの進化形スクリプト。
-
- （プ）
- スマホなどの小さいスクリーンではLightbox風に、より大きいスクリーンではインタラクションのスペースを残すよう設計された画像を拡大表示するスクリプト。
-
- （プ）
- プロダクト画像などを360度回転させたり、パノラマビューのように横長に表示させることができます。
-
- （プ）
- 画像のホバー時の方向によってオーバーレイをスライド表示します。
-
- （プ）
- サイズが不明でバラバラな複数の画像を指定サイズにフィットさせて配置します。
-
- （プ）
- 写真画像や動画から人物の顔だけを認識して、囲います。
-
- （プ）
- 画像にさまざまなタイプのキャプションを表示します。アニメーションも有り。
アニメーション関連
-
- （プ）
- ページを表示する時に、スライド、フェード、回転、ぱたりなどのかっこいいアニメーションを加えます。
-
- （単）
- ボタンをクリックすると、さまざまなモーフィングのアニメーションでコンテンツが表示されます。
-
- （単）
- スマホやタブレット向けの操作を楽しくするさまざまなアニメーションを実装できます。
-
- （単）
- 画像やSVGは使用せず、CSSで作成されたアイコンをモーフィングで変形させます。
-
- （プ）
- 要素にclassを加えるだけでCSS3アニメーションを自在に使えるようになります。
-
- （単）
- スクロールやクリックなどさまざまなイベントをトリガーにCSS3アニメーションを適用できます。
-
- （プ）
- CSSアニメーションのライブラリより速く動作するよう、jQueryで$.animate()を再実行してパフォーマンスを向上させます。
-
- （単）
- HTML5ベースの2D物理演算エンジンのスクリプト。
エフェクト関連
-
- （プ）
- Webページを水面にし、波紋の美しいエフェクトを実装します。
-
- （単）
- 美しく広がる波紋のエフェクトが簡単に利用できます。
-
- （プ）
- 美しく広がる波紋のエフェクトが簡単に利用できます。
-
- （プ）
- 画像やパネルの上をクリックしたら上辺が、中央なら全体が押されたようなエフェクトを与えます。
-
- （プ）
- 普通のWebページに映画の終わりに流れるスタッフロールみたいな演出を加えます。
-
- （単）
- ピクセルベースの3Dグラフィックをウェブページで利用できます。
-
- （プ）
- ページを表示する時、離脱する時にさまざまなアニメーションを加えます。
-
- （単）
- テキストや画像やパネルなど、さまざまな要素にかわいいシャドウをつけます。
テキスト関連
-
- （プ）
- 日本語のどんなWebフォントでも美しくカーニングできるスクリプト。
-
- （単）
- 行単位でスタイルを適用できるようにします。
-
- （プ）
- HTMLは汚さずに、テキストにちょっと面白いさまざまなアニメーションを適用できます。
-
- （プ）
- テキストを次々にモーフィングのアニメーションで表示します。
-
- （プ）
- テキストをかわいくサークル状に配置できます。
テーブル・リスト・チャート関連
-
- （単）
- 一味違ったアイデアでレスポンシブ対応のテーブルを実装します。
-
- （プ）
- スタイルシートではできないテーブルの繋がったセルをハイライトします。
-
- （プ）
- テキストや画像などのコンテンツにタグをつけ、かっこいいアニメーションでフィルタリングとソートをします。
-
- （プ）
- リストの各要素をスワイプすることができます。
フォーム関連
-
- （プ）
- フォームのさまざまなエレメントを異なるブラウザ、異なるスクリーンでも美しく同じ見た目にします。
-
- （プ）
- 入力された数字が見やすくなるよう指定した桁数ごとに自動で区切ります。
-
- （単）
- フォームの入力欄をフォーカス時にハイライトさせ、プレースホルダのテキストをアニメーションで消します。
-
- （プ）
- チェックボックスやラジオボタンのラベルを美しいデザインにします。
-
- （プ）
- 入力欄に入力すると、ラベルがアニメーションで浮き上がります。
パネル・ボックス関連
-
- （プ）
- 半透明やフラットのかっこいいパネルをさまざまなアニメーションで表示します。
-
- （プ）
- ページ全体、ページ上のさまざまな要素にオーバーレイをかっこよく表示します。
-
- （プ）
- 画像にオーバーレイでテキストを表示したり、ボタンやテキストなどさまざまな要素にオーバーレイをアニメーションで表示します。
-
- （プ）
- 表示ページの天地左右からアニメーションでスライド表示するパネルを実装します。
-
- （単）
- JavaScriptのalertをsweetAlertに変えるだけで、かわいいデザインのアラートをアニメーションで表示します。
モーダルボックス・ツールチップ関連
-
- （プ）
- ぷるぷるとかわいいアニメーションでモーダルボックスを表示させます。
-
- （プ）
- てん、てん、てん、ぽわーんとアニメーションで吹き出しを表示します。
-
- （プ）
- ホバーだけでなくクリックにも対応し、カスタマイズにも優れたツールチップを実装します。
-
- （プ）
- レスポンシブ対応のモーダルウインドウをシンプルに実装します。
プログレスバー・カウント関連
-
- （単）
- ユーザーがフォームに入力する際、その進捗をサイトのデザインを損なわないよう上部にアニメーションで美しく表示します。
-
- （単）
- ブラウザの上部に、シンプルでかっこいいナノサイズのバーをアニメーションで実装します。
-
- （プ）
- Canvasを使った美しいデザインでカウントダウンします。
ユーザビリティ・Google Analytics関連
-
- （プ）
- a要素にclassを加えるだけで別窓や印刷、ページ内アンカーへのスクロールなどの機能を加えます。
-
- （プ）
- ユーザーがどのようにスクロールしてページを見ているかGoogle Analyticsで解析できるスクリプト。
その他
-
- （単）
- ホバーするとシールのようにぺらっとめくれるようにするスクリプト。
-
- （単）
- CSS3からの新しい単位「rem」をIE8でも利用できるようにします。
-
- （プ）
- さまざまなソーシャルサービスのシェアボタンやシェアカウンターをボタン型のデザインで実装します。
-
- （単）
- カードを重ねたり、めくるようなアニメーションが実装できます。
-
- （プ）
- QRコードを生成することができます。
http://coliss.com/articles/build-websites/operation/javascript/best-jquery-plugins-and-scripts-2014.html
