calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

見栄えがよくなった!Web制作するなら知っておきたいjQueryプラグインまとめ

jQuery_plugin_library

ギャラリーサイトやECサイトなどで、最近よく見かけるデザインやエフェクトなど、制作前に知っておくと助かる、「どっかで見たことあるけど何だっけ?」といった感じのjQueryプラグインや最近のトレンドなるものをまとめました。ページにちょっとした工夫を凝らしたいとき、動きのある仕掛けでキャンペーンサイトを作りたいときに。

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

もくじ

メニュー

画像エフェクト

スクロール

レイアウト

フォーム

メニュー

1.フィーチャーリスト

feature-list_jQuery

コーポレートサイトでよく見かける横タブメニューはこちらを使うと簡単に実現できます。キャプションが変わったあとに画像が変わるエフェクト。ニュースや新着情報などに。

sticky-header_jQuery

ウィンドウのスクロールに応じてヘッダーを移動させるスティッキーヘッダー。どれだけページが長くなっても、ウェブページの上部に検索フォームやナビゲーション・メニューを配置されるので、例えばナビをおけばいつでもページ遷移ができるようになります。以下はclingifyの使い方。

画像エフェクト

3.マウスオーバーで画像にキャプション

caption-image_jQuery

写真にマウスオーバーすると、テキストをかぶせてくれるMosaic。企業サイトだけでなく、様々なサイトで見かけるようになりました。ギャラリーページにちょっとした工夫を凝らしたいときに、これを使えば見栄えが随分よくなります。

4.イメージビューア

image-viewer_jQuery

サムネイル画像をクリックしたら画像が切り替わるイメージビューア。こちらは下にある画像をクリックするとフェードしながら画像を差し替えるというもの。シンプルなので使いやすいですね。

5.ズームインエフェクト

zoom-effect_jQuery

ECサイトによくみられる商品画像や写真をマウスホバーすると拡大されるズームインエフェクト。一つは画像の一部をズームアップできるjQueryプラグインjqZoom。省スペースで画像をすっきり見せたいときに使いたいですね。もう一つはjQueryプラグインまとめで様々なパターンが用意されています。

6.ブラーエフェクト

blur-effect_jQuery

いわゆるボカシ効果を入れるプラグインblur.js。背景をベースにブロックに対してぼかしがかかった画像を設定します。

スクロール

7.Infinite Scroll(無限スクロール)

infinite-scroll_jQuery

ブラウザのスクロールに対応しコンテンツを表示していくinfinite scroll(無限スクロール)。下部まで移動すると次のページを表示してくれるプラグイン。ページ遷移を行うことなく大量のコンテンツをユーザーに提供できます。無限スクロールはTwitterやFacebookなどのサービスで使われていますね。

8.画像シーケンス

sequence_jQuery

画像シーケンスは映像を複数の連続した画像に分け、マウスホイールすると画像が動いているように見せる手法。通常は連続した画像を1箇所に重ねて配置し、1点以外を非表示にします。

9.横スクロール

horizontal_jQuery

サイト全体を横や縦にスクロールさせる方法や、簡単に効果を付与できるjQueryプラグインまとめ。

10.フリック機能

flick-function_jQuery

スマートフォンで使われるフリック機能を実装するならjQuery.flickSimple.jsがおすすめです。iPhone/Android/PCのブラウザ対応で縦フリック、自動スライドもあり。flipsnap.jsもフリック操作のスライドを作れます。

レイアウト

11.画面全体に写真

picture-screen_jQuery

写真をトップページのブラウザいっぱいに表示するデザインを作るならこちら。bgStretcherもよいと思ったんですが有料になってましたね。

12.フロートボックスを詰めて表示

floatbox_jQuery

隙間なくボックスを敷き詰めていくレイアウトも多くみるようになりましたが、Masonryを利用することで簡単に作ることができます。各ボックスのサイズを取得後絶対配置で並び替える処理をしてくれます。

フォーム

13.ダイアログ

dialog_jQuery

最近はフォームがポップアップで表示されるサイトも多くなってきました。こちらはjQuery UIのDialogでメッセージを表示する方法。

14.バリデーション

validation_jQuery

ECサイトや会員登録時に見られるフォームで、入力内容に不備がないかチェックするバリデーション。フォームに入力したデータの簡単なチェックをしたいときに。

15.確認画面

confirmation_jQuery

フォーム入力の確認画面を生成するプラグイン。

スポンサード リンク

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

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

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

Comments

Leave a Comment

コメントする

This site uses Akismet to reduce spam. Learn how your comment data is processed.