今回は「Web制作で使いたい使える」jQueryプラグインやスクリプトなどをまとめました。WordPressテーマを作るときに使うもの、検索でヒットしにくいプラグインも多数ご紹介。
もくじ
動画
WP管理画面
テキストエフェクト
エフェクト
メニュー
スライド
他
動画
１．動画をブラウザの背景全体に再生させる
最近ではサイズ大きめの通信が可能になりつつあり、動画を使いインパクトを出すページが増えてきました。こちらはYouTubeにアップロードされた動画を背景全体に表示させるtubularというプラグイン。動画を背景にするならこれがイチオシです。
- jQueryのtubularプラグインを使用してYOUTUBEの動画をブラウザの背景全体に再生させる（レスポンシブ対応）【jQuery連載01】 | HTML5でサイトをつくろう
- 背景にYouTube動画を流せるJQueryプラグイン「tubular」｜WEB Drawer
２．動画を綺麗に表示させる
YouTubeをページにそのまま埋め込むと、上下に黒のバーがつき、YouTube感が出るので見栄えが今ひとつです。こちらは動画をシンプルに表示させるためのPrettyEmbedというプラグイン。もう一つは動画をポップアップさせるプラグイン。
- YouTubeの動画を綺麗に表示させるJavaScript「PrettyEmbed.js」｜skuare.net
- 動画をクールにモーダル化してハイライトできるjQueryプラグイン「Video Lightning」:phpspot開発日誌
WP管理画面
WordPressの管理画面をカスタマイズするときにフロントページの配色（カラーピッカーでの）の変更やファイルをアップロードしたりする機能を付けたい。そんな一歩進んだカスタマイズをしたいときに知っておくと便利なものをメモしておきます。
３．カラーピッカー
管理画面にて背景色やメインカラーをユーザーに選択してもらいたい場合、カラーコードを入力させるより、カラーピッカーでの選択をさせたい。そんな時はこちらのFarbtastic Color Pickerを使います。
４．ドラッグ&ドロップでファイルをアップロード
管理画面からロゴ画像やファビコンなどを直接アップロードさせられるようにカスタマイズしたい。そんなときはこちらのPluploadというファイルアップローダが便利。
５．並べ替え＋DBに保存
ドラッグ＆ドロップで並べ替えを行えるようにします。並べ替えた順番を保存・再現する方法と並び順をデータベースに保存も合わせてチェック。
テキストエフェクト
６．文字を動かしならがテキスト表示
国産のコーポレートサイトを見ているとたまにみかける、文字を動かしながら表示するエフェクト。
- HTML5 × CSS3 × jQuery – #20 文字をランダムでカシャカシャ動かしながらテキストを表示させるプラグインを作る ｜ Developers.IO
- テキストや数字をスロットの様に回転させるJavaScript「ODOMETER」＆jQuery「a simple jquery slot machine effect」「tally_counter」 | BlackFlag
７．フォントサイズを変更
スクリーンサイズに応じてフォントサイズを変更させるレスポンシブなプラグインfontFlex。ブラウザのサイズに応じて自動でサイズを調整してくれます。
８．文字の拡大・縮小
来訪者に文字のサイズ調整を選択させるには、Text Resizerを使うと実現できます。スタイルが古めなのでCSSで今風に調整しましょう。
９．数字のカウントアップ
指定した数字までエフェクトをかけながらカウントしてくれるライブラリcountUp。WP有料テーマなどでよく見かけます。
１０．読み込み時に文字を動かす
FlashのようにJavaScriptでアニメーションを実現する書き方で
setTimeoutを使っています。jQueryでフェードインなどを○秒後に実行する場合はsetTimeoutとopacityを使います。エフェクト
１１．波紋
１２．ドラッグで画像を回転
画像を掴むと動かした方向へ回転させることが可能になるThreeSixtyRotate。
１３．ボタンを3Dで回転
クリックすることで上下左右と立体的に回転させることができるTURNBOX。縦横幅、回転軸、アニメーションの時間、回転方向などを指定可能です。
１４．要素が見えたタイミングでイベントを発生
スクロールされた箇所でイベントを発生させるinviewを使い、ブラウザ上で見えたときに処理を実行させます。
メニュー
１５．メニュー以外を暗くするメガドロップダウン
ナビゲーションメニューの大カテゴリをマウスホバーしたときに、サブメニューをamazonメガドロップのように見せたい。こちらはメニュー以外を暗くするオーバーレイエフェクトつき。
１６．簡単にナビゲーションメニューをレスポンシブへ
筆者が使った中で一番簡単に実装可能だったのでオススメ。
１７．タブからアコーディオンに切り替え
スマホ表示の際、タブのままだと使いにくそうだと感じたら、ブレークポイントでタブをアコーディオンに変更させるResponsive-Tabsを使います。
１８．クリックすると上部に拡大画像／フォトギャラリー
写真をクリックすると上部に拡大画像を表示します。開閉時のエフェクトが気持ちよいですよ。
スライド
１９．4分割表示
4つのタイル型スライドのチュートリアル。こういった見せ方もあるんだなということでメモしておきます。
２０．マウス操作でスライドを移動させる
画像をマウス操作で移動させるチュートリアル。以下で使われているDragdealer.js – drag provider, the good stuffではドラッグで要素を移動させることが可能です。
他
２１．IE8以下でもCSS3のbackground-sizeを使えるように
横幅ピッタリなページが増えてきましたが、IE8以下でもbackground-sizeプロパティを使えるようにしたい。そんな時はこちら。
２２．要素を上下左右中央にフィットさせる
画像などを上下、左右、中央にフィットさせるJSライブラリ。
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法
