今風になった！Web制作で使える最近のjQueryプラグインまとめ

• 作成：2014/10/14
• 更新：2014/11/01
• Web制作 >

比較的最近のプラグインで、今風の動きをするものなど、制作前に知っておくと助かるjQueryプラグインをまとめました。国内のサイトであまり取り入れてないようなものや、定番のものまで。ページにちょっとした工夫を凝らしたいときや、少しめずらしい仕掛けでキャンペーンサイトを作りたいときに。

エンジニア速報は Twitter の@commteで 1 日 5 回配信しています。

もくじ

動き

• １．ジオメトリック

背景

• ２．フルスクリーンでスライドさせる
• ３．ドロアー風ライトボックス
• ４．動画を再生するタイプ３つ

スクロール

• ５．スクロールでクロスフェード
• ６．スクロールで奥行きを表現
• ７．スクロールで分割

画像

• ８．APNG
• ９．Google 画像検索風ライトボックス
• １０．トイカメラ風のフィルター

ポップアップ

• １１．おしゃれなアラート
• １２．シンプルなモーダルウィンドウ

マウス操作

• １３．ドラッグ＆ドロップ
• １４．ドラッグ＆ドロップでアップロード
• １５．切り抜き範囲を動かす
• １６．右クリック／オリジナルメニュー表示

アニメーション

• １７．立体的に回転させる
• １８．ページ遷移
• １９．プログレスバー

他

• ２１．地図を作成
• ２２．郵便番号から住所を補完

動き

１．ジオメトリック

ジグザグ線、ひし型や三角形などで構成された模様を使うサイトが増えてきたのでメモしておきます。

こちらは幾何学模様をパララックスで表示する視差効果のあるプラグイン。シンプルな線と動きなのでミニマルにも使えそうです。

• [ダウンロード] jnicol/particleground · GitHub
• [デモ] Particleground demo

CSSで幾何学模様を表現する手順はこちら。

• SCSSとCompassでおしゃれなCSSパーティクルを作ってみた – ICS LAB

背景

２．フルスクリーンでスライドさせる

シンプルながらも横幅いっぱいまでスライドを表示するSkippr。もちろん、自動再生・矢印・間隔・早さ・アニメーションの種類などを選択できる軽量なプラグインです。

• シンプルかつフラットなスライドショー『Skippr』の使い方 | Web制作会社スタイル

３．ドロアー風ライトボックス

画像をクリックすると横からスライドしながら画像を表示する、ドロアーメニューのような動きをするライトボックス風のプラグイン。レスポンシブ対応。

ギャラリーページを作る場合、コンテンツ領域を広げられるので便利。

• Strip

４．動画を再生するタイプ３つ

ダイナミックなビジュアルサイトを作成したい場合、動画を背景に埋め込む見せ方が有効ですが、使い分けできるように３つチョイスしました。

何度もご紹介してますがおさらいも兼ねて。YouTube動画などを背景として表示できるtubularと、自分のサーバーにある動画を背景に流せるBigVideo、Videの使い方。エンコードの手間が省けるのでメモ。

• Bigvideoプラグインを使用してvideo要素で動画をブラウザの背景全体に再生させる（レスポンシブ対応）【jQuery連載02】 | HTML5でサイトをつくろう
• jQueryのtubularプラグインを使用してYOUTUBEの動画をブラウザの背景全体に再生させる| HTML5でサイトをつくろう
• よくある「背景でムービーが再生されてる奴」を実現する（Vide.js） | mah365

スクロール

５．スクロールでクロスフェード

スクロールすると画像をクロスフェード（徐々に切り替える）させながら表示するオシャレなプラグイン。デモではボカシ画像を用意して繋げてありますが、スクロール後に表示させる画像の準備が必要です。

• [デモ] crossfade js
• スクロールで画像がクロスフェードするCrossfade.js｜こうめの“これから使える”jQueryプラグイン

６．スクロールで奥行きを表現

上下左右ではなく、スクロールによって奥側の要素が起き上がるかのようなエフェクト。3Dっぽい表示をします。ワンページでスクロール量が多いサイトに使いたい効果。

• [デモ] Manuel Rueda
• ASCII.jp：スクロールアニメーションによる立体コンテンツの見せ方 (1/2)

７．スクロールで分割

スクロールすると左右に分割されたレイアウトが、上下から降りてきて、一つになるような見え方をするエフェクト。今までにないパララックスです。

• [デモ] multiscroll js
• multiscroll.js - パララックスとはまた違うスクロールエフェクト MOONGIFT

画像

８．APNG

Wikipediaから引用させていただくと「アニメーションGIFのPNG版」ということらしいです。動くPNGのメリットって何だろうと、以下の記事を見ると、透過にした画像の周囲に出来るギザギザが入らず、影も綺麗に再現されているようです。

apng-canvasを使えば、「サポートされてないブラウザでも擬似的にAPNGを表示できる」そうなのでメモ。こちらのサイトを参考に。

• これからはGIFアニメからAPNGの時代に！ iOS 8でサポートされたAPNG画像を使いこなそう – ICS LAB
• davidmz/apng-canvas · GitHub
• Online APNG Assembler

９．Google 画像検索風ライトボックス

トレンドというわけではないですけど珍しかったので。画像をクリックするとグーグル画像検索一覧のように、画面中心に画像を表示します。

• [デモ] jQuery.GI.TheWall.js
• Google画像検索ライクな表示/アニメーションライブラリ MOONGIFT

１０．トイカメラ風のフィルター

写真にフィルターをかけるならtiltShift jsとvintageJS。画像編集ソフトを使わなくても、色あせたビンテージ写真のような効果をつけることが出来ます。

• CSS3のFilter Effectsを使って画像にチルトシフト効果を与えるjQueryプラグイン・tiltShift.js - かちびと.net
• 画像をヴィンテージ加工してしまうjQueryプラグイン「vintageJS」｜skuare.net

ポップアップ

１１．おしゃれなアラート

見栄えのするalertダイアログを表示してくれるライブラリ。デモではダイアログ内にアニメーションアイコンを出したり、ダイアログ以外を暗くオーバーレイさせたりと今風です。

• alert()のダイアログのスタイルを変更するスクリプト・SweetAlert - かちびと.net

１２．シンプルなモーダルウィンドウ

これ以上シンプルには作れまいという感じのモーダルウィンドウ。

• モーダルを簡単に実現させるJavaScript「Reveal」｜skuare.net

マウス操作

１３．ドラッグ＆ドロップ

Droppableを使い、ドラッグ＆ドロップする方法。

• jQuery UIを利用して要素をドラッグアンドドロップさせてみる | 株式会社LIG

１４．ドラッグ＆ドロップでアップロード

こちらはDropareaを使い、ドラッグ＆ドロップでアップロードさせます。

• HTML5+jQueryのドラッグ&ドロップに対応したアップローダー・droparea - かちびと.net

１５．切り抜き範囲を動かす

使いどころが難しそうですがメニューなんかに使うと面白いかもしれない。画像を切り抜き、マウスホバーによって切り抜き範囲をユラユラと動かせるプラグイン。

• ANTON072/jquery.morphing.js · GitHub
• マウスの動きに追従してぐにょぐにょするjQueryプラグイン「jquery.morphing.js」 | webOpixel

１６．右クリック／オリジナルメニュー表示

結構古いプラグインですが、右クリックされたときに、自分だけのオリジナルメニューを表示することもできます。ContextMenuを使えば、アイコンなどをつけることも可能です。

• ASCII.jp：jQueryプラグインで世界に1つの右クリックメニュー (1/2)
• jQueryを使った右クリックの制御

アニメーション

１７．立体的に回転させる

要素をクルクルと3D回転させるTURNBOX.jsを使った実装方法。大きさ、回転方向などを指定できます。

• 要素を立体的に回転させて動かすエフェクトTURNBOX.jsの実装方法 | 株式会社LIG

１８．ページ遷移

Animsition…はページ遷移の動き出すアニメーションプラグイン。フェード、回転、倒れこむようなエフェクトなど、今風でオシャレな見え方を実現させます。ページ遷移時にちょっとした動きを出したいときに。

• ページ遷移時にアニメーション効果をつけるjQueryプラグイン「Animsition」＆「Animated Pageswitch Plugin」 | BlackFlag

１９．プログレスバー

残り時間など作業の進捗状況をアニメーションによって表示するプログレスバーは色々あるかと思いますが、今っぽいものをご紹介。12種類のプログレスバーを簡単に導入できるPACEの使い方。

• コピペで完了！12種類のプログレスバーを簡単に導入できるPACE.js | co-jin

他

２１．地図を作成

SVGで世界地図を表示可能にするjQuery Vector Mapsと日本地図を表示しクリックできるJapan Mapを使った地図の実装方法。

日本地図の方はWebサービスや、各都道府県へのリンクをページで表示したい場合に使えそうです。

• canvasで日本地図を表示してくれるjQueryプラグインのJapanMap | スターフィールド株式会社
• 世界地図／日本地図を作成する「jQuery Vector Maps／Japan Map」プラグイン （1/3）：CodeZine

２２．郵便番号から住所を補完

Google日本語入力のAPIを使ったプラグイン。もう一つは郵便番号を入力することで、住所を自動入力させるajaxzip3の使い方。

• kotarok/jQuery.zip2addr · GitHub
• jQueryによる郵便番号→住所変換ライブラリ「AjaxZip」: 小粋空間