トレンドとなりつつある視覚効果や、細部にちょっとした動きを取り入れたいときに使えるjQuery プラグインをまとめました。ユーザーが使いやすくなるよう、ページにひと工夫したいときに。少し前のプラグインもありますが、今から使えそうなものもピックアップ。

もくじ

マイクロインタラクション

• １．粘性
• ２．移動するプレースホルダー
• ３．滑らかにページ移動させる
• ４．パスワード強度を可視化
• ５．オートコンプリート
• ６．テキスト入力
• ７．Google Map（吹き出し・マーカー）
• ８．オートページャー
• ９．プログレス12パターン
• １０．ノーティフィケーション

レタリング

• １１．１文字ごとに指定

フルスクリーン

• １２．モーダルウィンドウ（全画面）
• １３．フォーム（全画面）
• １４．高さが揃う画像レイアウト

マイクロインタラクション

１．粘性

液体同士が密着する時に起こる「ペタッとくっつく」かのような粘性のある視覚効果。少しトリッキーな動きではありますが、最近少しずつ見かけるようになってきたのでメモしておきます。

• Creative Gooey Effects | Codrops

２．移動するプレースホルダー

テキストエリアのクリックをトリガーとして、常時見える位置へプレースホルダーを移動させるプラグインを3つご紹介。

• jQuery Label Better by Pete R. | The Pete Design
• floatlabels js – placeholderがラベルへ移動する MOONGIFT
• React signup form example

３．滑らかにコンテンツを入れ替える

非同期通信をしながらページ遷移なしでコンテンツやURLを変更可能にするプラグイン。コンテンツの表示速度を短縮したい時に（pushStateとは）。

• jQueryプラグイン「pjax」でスムーズにページ遷移するサイトの作り方 | Neganin(ネガニン)
• smoothState

４．パスワード強度を可視化

パスワードを入力した際の強度を文言やプログレスバーで表示してくれるタイプを２つ。

• jQueryを使ったパスワードの強度判定用プラグイン、jQuery.pwdMeasure.jsを書いてみた | WebDesign Dackel
• [デモ] Complexify
• [ダウンロード] GitHub

５．オートコンプリート

オートコンプリートの中でも、カスタマイズが簡単なプラグインAwesompleteの使い方と配布先。

• [使い方] 超軽量でカスタマイズ性の高いオートコンプリート実装「Awesomplete」:phpspot開発日誌
• [ダウンロード] Awesomplete

６．テキスト入力

テキスト入力した際の些細な動き（図形や線）、エフェクトなど。

• [ソース] Some More Inspiration for Text Input Effects | Codrops
• [デモ] Text Input Effects | Set 2

７．Google Map（吹き出し・マーカー）

グーグルマップに独自のマーカーや吹き出しなどを簡単にカスタマイズできます。少し個性を出したいときに。

• [使い方] JSを書かずにGoogle Mapに吹き出しやオリジナルマーカーを設置できるjQueryプラグイン「AxGmap」 | objc-Lovers
• [ダウンロード] Nouris-Inc/jquery-axgmap · GitHub

８．オートページャー

ページ後部までスクロールすると、自動で次のページを読み込むオートページャー。配布先も追記。

• [使い方] jQueryのautopagerで次ページを画面遷移なしで自動読込みする方法 – ゆめぴょんの知恵
• [ダウンロード] jquery-autopager

９．プログレスバー12パターン

ページ読み込み時に、読み込み状況を表示するページローディングエフェクト１２パターン。色も簡単に変更可能。

• [使い方] 12種類のプログレスバーを簡単に導入できるPACE.js | co-jin
• [ダウンロード] PACE

１０．ノーティフィケーション

通知件数をボタン上に配置したり、クリックによってウィジェットを表示したり、ユーザーに情報を通知するプラグインまとめ。

• 効果的にユーザーに通知ができる| DesignDevelop

レタリング

１１．１文字ごとに変化させる

文字全体ではなく、１文字ごとに動きや色の変化を与えたり、文字ごとに細かいアニメーションを付与するタイプ３つ。

• [使い方] Lettering.jsを併用して、任意のテキストにCSS3のアニメーションエフェクトを実装するスクリプト・textillate.js – かちびと.net
• [ダウンロード] Textillatejs
• jQuery テキストをタイピング風に一文字ずつ表示したり文字ごとに色を変える方法。文字列を一文字ごとにspanで囲む | Stronghold
• テキストを1文字づつアニメーションで表示させるjQueryプラグイン「jquery.textAnimation」 – develo.org

フルスクリーン

１２．モーダルウィンドウ（全画面）

フルスクリーンで入力フォームや通知などを表示するサイトが増えてきました。以下はモーダル系プラグインとCSSのみでポップアップさせる方法。

• [使い方] 心地よし！フルスクリーンでモーダル表示させるjQueryプラグイン「animatedModal.js」｜skuare.net
• [ダウンロード] animatedModal
• [CSS版] No JS modal popup window

１３．フォーム（全画面）

フォーム入力後、アニメーションで次々とフィールドを表示させていく方法。

• [デモ] Fullscreen Form Interface
• [ソース] Fullscreen Form Interface

１４．高さが揃う画像レイアウト

Masonryは高さが揃いませんが、こちらはFlickrのレイアウトのように綺麗に縦の高さが揃うプラグイン。視線の動きが定まるので、ユーザーにとっては写真などを見つけやすくなります。

• [ダウンロード] Justified Gallery
• [使い方] レスポンシブ対応 Justified Gallery の使い方 | SK2 +620 DESIGNING

スポンサード リンク