calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

今っぽくなった!トレンドをおさえたjQuery プラグインまとめ

plugin_details

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

PR
IT/WEB業界への転職なら
Sponsored Link

もくじ

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

レタリング

フルスクリーン

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

1.粘性

viscosity

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

2.移動するプレースホルダー

placeholder-move

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

3.滑らかにコンテンツを入れ替える

smoothly

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

4.パスワード強度を可視化

pass-visual

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

5.オートコンプリート

autocomplete

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

6.テキスト入力

txt-input

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

7.Google Map(吹き出し・マーカー)

g-map-marker

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

8.オートページャー

autopager

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

9.プログレスバー12パターン

progress-pattern

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

10.ノーティフィケーション

notification

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

レタリング

11.1文字ごとに変化させる

specified-character

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

フルスクリーン

12.モーダルウィンドウ(全画面)

fullscreen-modal

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

13.フォーム(全画面)

fullscreen-form

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

14.高さが揃う画像レイアウト

imglayout-height

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

スポンサード リンク

この記事を書いた人
投稿者:commte

株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

URL:西田 鉄平
この後によく読まれている記事

Comments

Leave a Comment

コメントする