calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

Web制作で使えた！jQueryプラグインまとめ＋起業しました

  • 作成：2014/09/1
  • 更新：2014/11/01
  • Web制作 >
jquery_plugin_gallery

報告が遅れましたが、5月に退社し6月に起業（株式会社コムテ）しました。今までブログにメモしておいたことが、起業や納品に役立った部分もあり、ブログを継続してよかったと思います。ブログを見てくださっている皆様、ご紹介させていただいたサイト運営者様、応援して下さっている皆様には心よりお礼申し上げます。経営や制作の部分ではまだまだ未熟ですが、今後ともご指導ご鞭撻のほど、よろしくお願いします。

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

エンジニア速報は Twitter の@commteで配信しています。

Sponsored Link

もくじ

動画

WP管理画面

テキストエフェクト

エフェクト

メニュー

スライド

他

動画

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

background-video-browser_jquery

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

２．動画を綺麗に表示させる

nicely-video_jquery

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

WP管理画面

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

３．カラーピッカー

color-picker_jquery

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

４．ドラッグ&ドロップでファイルをアップロード

upload-file-drag-and-drop_jquery

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

５．並べ替え＋DBに保存

sorting_jQuery_jquery

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

テキストエフェクト

６．文字を動かしならがテキスト表示

move-text_jquery

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

７．フォントサイズを変更

change-font-size_jquery

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

８．文字の拡大・縮小

scaling-character_jquery

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

９．数字のカウントアップ

count-up-number_jquery

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

１０．読み込み時に文字を動かす

move-character_jquery

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

エフェクト

１１．波紋

moire_jquery

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

１２．ドラッグで画像を回転

image-dragging_jquery

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

１３．ボタンを3Dで回転

rotate-3d_jquery

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

１４．要素が見えたタイミングでイベントを発生

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

メニュー

１５．メニュー以外を暗くするメガドロップダウン

megadrop-dark_jquery

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

１６．簡単にナビゲーションメニューをレスポンシブへ

responsive-navigation-easily_jquery

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

１７．タブからアコーディオンに切り替え

switch-accordion-tab_jquery

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

１８．クリックすると上部に拡大画像／フォトギャラリー

enlarge-image_jquery

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

スライド

１９．4分割表示

split-display_jquery

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

２０．マウス操作でスライドを移動させる

move-mouse_jquery

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

他

２１．IE8以下でもCSS3のbackground-sizeを使えるように

background-size-ie8_jquery

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

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

vertical-horizontal_jquery

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

スポンサード リンク

関連記事

Comments

  1. Twitter 人気のつぶやき 8/30～9/5 2014 | Webクリエイターボックス より:
    2014年9月6日 10:08 AM

    […] 4. jQuery：Web制作で使えた！jQueryプラグインまとめ＋起業しました […]

    返信

Leave a Comment

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。