calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

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

Awesome_jQuery_Plugins

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

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

もくじ

動き

背景

スクロール

画像

ポップアップ

マウス操作

アニメーション

動き

1.ジオメトリック

geometric_jQueryPlugin

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

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

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

背景

2.フルスクリーンでスライドさせる

fullscreen_jQueryPlugin

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

3.ドロアー風ライトボックス

Strip

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

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

4.動画を再生するタイプ3つ

playvideo_jQueryPlugin

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

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

スクロール

5.スクロールでクロスフェード

crossfade-scroll_jQueryPlugin

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

6.スクロールで奥行きを表現

appearance_jQueryPlugin

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

7.スクロールで分割

multiScroll

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

画像

8.APNG

apng_jQueryPlugin

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

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

9.Google 画像検索風ライトボックス

google-image_jQueryPlugin

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

10.トイカメラ風のフィルター

camera-style_jQueryPlugin

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

ポップアップ

11.おしゃれなアラート

stylish-alert_jQueryPlugin

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

modal-window_jQueryPlugin

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

マウス操作

13.ドラッグ&ドロップ

drag-drop_jQueryPlugin

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

14.ドラッグ&ドロップでアップロード

uploaddrop_jQueryPlugin

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

15.切り抜き範囲を動かす

trimming-range_jQueryPlugin

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

16.右クリック/オリジナルメニュー表示

right-click_jQueryPlugin

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

アニメーション

17.立体的に回転させる

rotate_jQueryPlugin

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

18.ページ遷移

page-transition_jQueryPlugin

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

19.プログレスバー

progress-bar_jQueryPlugin

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

21.地図を作成

create-map_jQueryPlugin

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

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

22.郵便番号から住所を補完

complements_jQueryPlugin

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

スポンサード リンク

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

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

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

Comments

  1. […] 今風になった!Web制作で使える最近のjQueryプラグインまとめ | コムテブログ […]

  2. […] 2. jQuery:今風になった!Web制作で使える最近のjQueryプラグインまとめ […]

Leave a Comment

コメントする