比較的最近のプラグインで、今風の動きをするものなど、制作前に知っておくと助かるjQueryプラグインをまとめました。国内のサイトであまり取り入れてないようなものや、定番のものまで。ページにちょっとした工夫を凝らしたいときや、少しめずらしい仕掛けでキャンペーンサイトを作りたいときに。
もくじ
動き
背景
スクロール
画像
ポップアップ
マウス操作
アニメーション
他
動き
１．ジオメトリック
ジグザグ線、ひし型や三角形などで構成された模様を使うサイトが増えてきたのでメモしておきます。
こちらは幾何学模様をパララックスで表示する視差効果のあるプラグイン。シンプルな線と動きなのでミニマルにも使えそうです。
CSSで幾何学模様を表現する手順はこちら。
背景
２．フルスクリーンでスライドさせる
シンプルながらも横幅いっぱいまでスライドを表示するSkippr。もちろん、自動再生・矢印・間隔・早さ・アニメーションの種類などを選択できる軽量なプラグインです。
３．ドロアー風ライトボックス
画像をクリックすると横からスライドしながら画像を表示する、ドロアーメニューのような動きをするライトボックス風のプラグイン。レスポンシブ対応。
ギャラリーページを作る場合、コンテンツ領域を広げられるので便利。
４．動画を再生するタイプ３つ
ダイナミックなビジュアルサイトを作成したい場合、動画を背景に埋め込む見せ方が有効ですが、使い分けできるように３つチョイスしました。
何度もご紹介してますがおさらいも兼ねて。YouTube動画などを背景として表示できるtubularと、自分のサーバーにある動画を背景に流せるBigVideo、Videの使い方。エンコードの手間が省けるのでメモ。
- Bigvideoプラグインを使用してvideo要素で動画をブラウザの背景全体に再生させる（レスポンシブ対応）【jQuery連載02】 | HTML5でサイトをつくろう
- jQueryのtubularプラグインを使用してYOUTUBEの動画をブラウザの背景全体に再生させる| HTML5でサイトをつくろう
- よくある「背景でムービーが再生されてる奴」を実現する（Vide.js） | mah365
スクロール
５．スクロールでクロスフェード
スクロールすると画像をクロスフェード（徐々に切り替える）させながら表示するオシャレなプラグイン。デモではボカシ画像を用意して繋げてありますが、スクロール後に表示させる画像の準備が必要です。
６．スクロールで奥行きを表現
上下左右ではなく、スクロールによって奥側の要素が起き上がるかのようなエフェクト。3Dっぽい表示をします。ワンページでスクロール量が多いサイトに使いたい効果。
７．スクロールで分割
スクロールすると左右に分割されたレイアウトが、上下から降りてきて、一つになるような見え方をするエフェクト。今までにないパララックスです。
画像
８．APNG
Wikipediaから引用させていただくと「アニメーションGIFのPNG版」ということらしいです。動くPNGのメリットって何だろうと、以下の記事を見ると、透過にした画像の周囲に出来るギザギザが入らず、影も綺麗に再現されているようです。
apng-canvasを使えば、「サポートされてないブラウザでも擬似的にAPNGを表示できる」そうなのでメモ。こちらのサイトを参考に。
- これからはGIFアニメからAPNGの時代に！ iOS 8でサポートされたAPNG画像を使いこなそう – ICS LAB
- davidmz/apng-canvas · GitHub
- Online APNG Assembler
９．Google 画像検索風ライトボックス
トレンドというわけではないですけど珍しかったので。画像をクリックするとグーグル画像検索一覧のように、画面中心に画像を表示します。
１０．トイカメラ風のフィルター
写真にフィルターをかけるならtiltShift jsとvintageJS。画像編集ソフトを使わなくても、色あせたビンテージ写真のような効果をつけることが出来ます。
- CSS3のFilter Effectsを使って画像にチルトシフト効果を与えるjQueryプラグイン・tiltShift.js – かちびと.net
- 画像をヴィンテージ加工してしまうjQueryプラグイン「vintageJS」｜skuare.net
ポップアップ
１１．おしゃれなアラート
見栄えのするalertダイアログを表示してくれるライブラリ。デモではダイアログ内にアニメーションアイコンを出したり、ダイアログ以外を暗くオーバーレイさせたりと今風です。
１２．シンプルなモーダルウィンドウ
これ以上シンプルには作れまいという感じのモーダルウィンドウ。
マウス操作
１３．ドラッグ＆ドロップ
Droppableを使い、ドラッグ＆ドロップする方法。
１４．ドラッグ＆ドロップでアップロード
こちらはDropareaを使い、ドラッグ＆ドロップでアップロードさせます。
１５．切り抜き範囲を動かす
使いどころが難しそうですがメニューなんかに使うと面白いかもしれない。画像を切り抜き、マウスホバーによって切り抜き範囲をユラユラと動かせるプラグイン。
１６．右クリック／オリジナルメニュー表示
結構古いプラグインですが、右クリックされたときに、自分だけのオリジナルメニューを表示することもできます。ContextMenuを使えば、アイコンなどをつけることも可能です。
アニメーション
１７．立体的に回転させる
要素をクルクルと3D回転させるTURNBOX.jsを使った実装方法。大きさ、回転方向などを指定できます。
１８．ページ遷移
Animsition…はページ遷移の動き出すアニメーションプラグイン。フェード、回転、倒れこむようなエフェクトなど、今風でオシャレな見え方を実現させます。ページ遷移時にちょっとした動きを出したいときに。
１９．プログレスバー
残り時間など作業の進捗状況をアニメーションによって表示するプログレスバーは色々あるかと思いますが、今っぽいものをご紹介。12種類のプログレスバーを簡単に導入できるPACEの使い方。
他
２１．地図を作成
SVGで世界地図を表示可能にするjQuery Vector Mapsと日本地図を表示しクリックできるJapan Mapを使った地図の実装方法。
日本地図の方はWebサービスや、各都道府県へのリンクをページで表示したい場合に使えそうです。
- canvasで日本地図を表示してくれるjQueryプラグインのJapanMap | スターフィールド株式会社
- 世界地図／日本地図を作成する「jQuery Vector Maps／Japan Map」プラグイン （1/3）：CodeZine
２２．郵便番号から住所を補完
Google日本語入力のAPIを使ったプラグイン。もう一つは郵便番号を入力することで、住所を自動入力させるajaxzip3の使い方。
スポンサード リンク