こうめの“これから使える”jQueryプラグイン
圧倒的な人気を誇るJavaScriptのライブラリー「jQuery」。サイトに効果をあたえるプラグインが多数あることが魅力ですが、そのプラグインを探すことがWeb制作者の手間になっています。本連載では、「こうめ」さんこと大竹孔明さんがおすすめのプラグインと実装方法、実装例を紹介します。
2015年04月27日 11時00分更新
-
最終回 2015年04月27日 11時00分WebPro
画像の遅延ロードでイライラを解消 TADAプラグイン
ページを読み込んだときではなく、画像が見える位置までスクロールしたタイミングで読み込むjQueryプラグイン「TADA」を紹介します。
-
第21回 2015年03月02日 11時02分WebPro
Spotifyみたいなパララックスが作れるParallax ImageScroll
画像を使ったパララックス（視差）効果を簡単に実装できるjQueryプラグイン「Parallax ImageScroll」を紹介します。
-
第20回 2015年02月06日 11時00分WebPro
おしゃれなローディングアニメでイライラ解消 fakeLoader.js
ページの読み込みなどの際にフルスクリーンのローディングアニメーションを表示するプラグイン「fakeLoader.js」を紹介します。
-
第19回 2015年01月08日 11時00分WebPro
画像の色から背景色を決定！jquery.adaptive-backgrounds.js
指定した画像のドミナントカラーを抽出し、親要素の背景色として適用するjQueryプラグイン「jquery.adaptive-backgrounds.js」を紹介します。
-
第18回 2014年11月28日 11時35分WebPro
タイプライター風アニメーションが1行で作れるt-js
テキストをタイプライターで入力しているようなアニメーションで表示するjQueryプラグイン「t-js」を紹介します。
-
第17回 2014年11月06日 11時00分WebPro
Webサイトの背景をおしゃれに演出 Particleground
Webページの背景にパーティクルアニメーションを表示するプラグイン「Particleground」を紹介します。
-
第16回 2014年09月25日 11時00分WebPro
Facebook風ドロワーメニューが手軽に導入できる drawer
横からせり出してくる「ドロワーメニュー」をサイトに手軽に実装できるjQuery プラグイン「drawer」を紹介します。
-
第15回 2014年08月21日 11時00分WebPro
背景に動画を使ったサイトが手軽に作れる Vide
Webページの背景に動画を表示するjQuery プラグイン「Vide」。最近よく見かける、動画上にオーバーレイでコンテンツを表示するプロモーションサイトが簡単に制作できます。
-
第14回 2014年08月01日 12時00分WebPro
アニメーションつき円グラフを簡単実装！Circliful
カスタムデータ属性に値を渡すだけで円グラフをアニメーションつきで表示できるjQueryプラグイン「Circliful」を紹介します。
-
第13回 2014年07月18日 11時00分WebPro
流行のSVGアニメを手軽に作れるLazy Line Painter
最近流行のSVGを使ったパスアニメーションを手軽に作れるプラグイン「Lazy Line Painter」。手で描いたような動きをつけて表示できます。
-
第12回 2014年06月26日 12時00分WebPro
スクロールで画像がクロスフェードするCrossfade.js
スクロール量に応じて画像をクロスフェードで切り替えるプラグイン「Crossfade.js」。ページをスクロールすると写真がぼやけていくオシャレなトップページが作れます。
-
第11回 2014年06月13日 11時00分WebPro
かっこいいプロモーションサイトが作れる multiScroll.js
画面を左右に分割して別々にスクロールして見せられるjQueryプラグイン「multiScroll.js」。最近流行の効果を簡単に実装できるプラグインの使い方を紹介します。
-
第10回 2014年05月16日 11時00分WebPro
CSS3アニメーションが簡単に書けるjQuery Transit
CSS3によるアニメーションや要素の変化・変形を、jQueryで利用できるプラグイン「jQuery Transit」を紹介します。
-
第9回 2014年04月11日 11時00分WebPro
日付や時間を直感的に選択できるDateTimePicker
HTMLフォームに日時の入力支援機能（ピッカー）を実装するjQueryプラグイン「DateTimePicker」の使い方を紹介します。
-
第8回 2014年03月25日 11時00分WebPro
要素をアニメーションでカッコよく並び替えるMixItUp
要素のレイアウトをアニメーション付きで並び替えたり、絞り込んで表示したりできるjQueryプラグイン「MixItUp」を紹介します。
-
第7回 2014年03月04日 11時00分WebPro
レスポンシブにも対応したドロップダウン FlexNav
クロスブラウザー（IEは7以降）対応のドロップダウンメニューを簡単に実装できるjQueryプラグイン「FlexNav」を紹介します。
-
第6回 2013年12月25日 11時00分WebPro
セレクトメニューを自由にデザインできる customSelect.js
フォームのセレクトメニューのデザインを簡単にカスタマイズできるプラグイン「customSelect.js」を紹介します。
-
第5回 2013年11月22日 11時00分WebPro
RWDにも対応したjQuery.heightLine.js
複数のブロックレベル要素の高さを揃えるJavaScriptライブラリー「heightLine.js」のjQueryプラグイン版「jquery.heightLine.js」を紹介します。
-
第4回 2013年10月30日 11時00分WebPro
パララックスをサクッと作れるskrollr
skrollrはパララックス（視差効果）を簡単に実装できるプラグイン。多彩なエフェクトが用意されており、基本的なパララックスサイトであれば、サクッと作れます。
-
第3回 2013年10月02日 11時00分WebPro
レスポンシブ動画も実装できるモーダルMagnific Popup
Magnific Popupは、可変ウィンドウに対応した高機能なモーダルを実装できるjQueryプラグイン。レスポンシブWebデザインに便利です。
-
第2回 2013年09月10日 11時00分WebPro
レスポンシブ対応！軽量カルーセル OWL Carousel
OWL Carouselは、レスポンシブに対応した高機能なカルーセルを実装できるプラグインです。フリックやスワイプ、タッチにも対応しています。
-
第1回 2013年08月23日 11時00分WebPro
Facebook風の無限スクロールが作れるinfinite scroll
ページ下部まで移動すると、次のページを自動的に読み込んで表示するjQueryプラグイン「infinite scroll」。ブログ記事や、ECサイトの商品ページ、ギャラリーサイトなどで効果的です。
