水曜日, 9月 03, 2014

Web制作で使える使えた!jQueryプラグインまとめ

Web制作で使える使えた!jQueryプラグインまとめ

jquery_plugin_gallery
今回は「Web制作で使いたい使える」jQueryプラグインやスクリプトなどをまとめました。WordPressテーマを作るときに使うもの、検索でヒットしにくいプラグインも多数ご紹介。


もくじ

動画

WP管理画面

テキストエフェクト

エフェクト

メニュー

スライド


動画

1.動画をブラウザの背景全体に再生させる

background-video-browser_jquery
最近ではサイズ大きめの通信が可能になりつつあり、動画を使いインパクトを出すページが増えてきました。こちらはYouTubeにアップロードされた動画を背景全体に表示させるtubularというプラグイン。動画を背景にするならこれがイチオシです。

2.動画を綺麗に表示させる

nicely-video_jquery
YouTubeをページにそのまま埋め込むと、上下に黒のバーがつき、YouTube感が出るので見栄えが今ひとつです。こちらは動画をシンプルに表示させるためのPrettyEmbedというプラグイン。もう一つは動画をポップアップさせるプラグイン。


WP管理画面

WordPressの管理画面をカスタマイズするときにフロントページの配色(カラーピッカーでの)の変更やファイルをアップロードしたりする機能を付けたい。そんな一歩進んだカスタマイズをしたいときに知っておくと便利なものをメモしておきます。

3.カラーピッカー

color-picker_jquery
管理画面にて背景色やメインカラーをユーザーに選択してもらいたい場合、カラーコードを入力させるより、カラーピッカーでの選択をさせたい。そんな時はこちらのFarbtastic Color Pickerを使います。

4.ドラッグ&ドロップでファイルをアップロード

upload-file-drag-and-drop_jquery
管理画面からロゴ画像やファビコンなどを直接アップロードさせられるようにカスタマイズしたい。そんなときはこちらのPluploadというファイルアップローダが便利。

5.並べ替え+DBに保存

sorting_jQuery_jquery
ドラッグ&ドロップで並べ替えを行えるようにします。並べ替えた順番を保存・再現する方法と並び順をデータベースに保存も合わせてチェック。


テキストエフェクト

6.文字を動かしならがテキスト表示

move-text_jquery
国産のコーポレートサイトを見ているとたまにみかける、文字を動かしながら表示するエフェクト。

7.フォントサイズを変更

change-font-size_jquery
スクリーンサイズに応じてフォントサイズを変更させるレスポンシブなプラグインfontFlex。ブラウザのサイズに応じて自動でサイズを調整してくれます。

8.文字の拡大・縮小

scaling-character_jquery
来訪者に文字のサイズ調整を選択させるには、Text Resizerを使うと実現できます。スタイルが古めなのでCSSで今風に調整しましょう。

9.数字のカウントアップ

count-up-number_jquery
指定した数字までエフェクトをかけながらカウントしてくれるライブラリcountUp。WP有料テーマなどでよく見かけます。

10.読み込み時に文字を動かす

move-character_jquery
FlashのようにJavaScriptでアニメーションを実現する書き方でsetTimeoutを使っています。jQueryでフェードインなどを○秒後に実行する場合はsetTimeoutopacityを使います。


エフェクト

11.波紋

moire_jquery
マテリアルデザインで採用されている波紋エフェクトを実装できるtwinkle

12.ドラッグで画像を回転

image-dragging_jquery
画像を掴むと動かした方向へ回転させることが可能になるThreeSixtyRotate

13.ボタンを3Dで回転

rotate-3d_jquery
クリックすることで上下左右と立体的に回転させることができるTURNBOX。縦横幅、回転軸、アニメーションの時間、回転方向などを指定可能です。

14.要素が見えたタイミングでイベントを発生

スクロールされた箇所でイベントを発生させるinviewを使い、ブラウザ上で見えたときに処理を実行させます。


メニュー

15.メニュー以外を暗くするメガドロップダウン

megadrop-dark_jquery
ナビゲーションメニューの大カテゴリをマウスホバーしたときに、サブメニューをamazonメガドロップのように見せたい。こちらはメニュー以外を暗くするオーバーレイエフェクトつき。

16.簡単にナビゲーションメニューをレスポンシブへ

responsive-navigation-easily_jquery
筆者が使った中で一番簡単に実装可能だったのでオススメ。

17.タブからアコーディオンに切り替え

switch-accordion-tab_jquery
スマホ表示の際、タブのままだと使いにくそうだと感じたら、ブレークポイントでタブをアコーディオンに変更させるResponsive-Tabsを使います。

18.クリックすると上部に拡大画像/フォトギャラリー

enlarge-image_jquery
写真をクリックすると上部に拡大画像を表示します。開閉時のエフェクトが気持ちよいですよ。


スライド

19.4分割表示

split-display_jquery
4つのタイル型スライドのチュートリアル。こういった見せ方もあるんだなということでメモしておきます。

20.マウス操作でスライドを移動させる

move-mouse_jquery
画像をマウス操作で移動させるチュートリアル。以下で使われているDragdealer.js – drag provider, the good stuffではドラッグで要素を移動させることが可能です。


21.IE8以下でもCSS3のbackground-sizeを使えるように

background-size-ie8_jquery
横幅ピッタリなページが増えてきましたが、IE8以下でもbackground-sizeプロパティを使えるようにしたい。そんな時はこちら。

22.要素を上下左右中央にフィットさせる

vertical-horizontal_jquery
画像などを上下、左右、中央にフィットさせるJSライブラリ。





  Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法