calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

この上なく便利！すごい「jQuery」の小技まとめ３２

  • 作成：2013/07/1
  • 更新：2014/11/01
  • Web制作 >
jQuery

先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定番からちょっとマイナー（Google Analytics関係とか）なものまでjQueryの小技、プラグインを集めさせていただきました。

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

Sponsored Link

もくじ

スクロール
１．ページ内リンク／フッターまわり／トップに戻る
２．パララックス

スライド
３．カルーセル
４．レスポンシブなスライダー
５．ヌルヌルサクサクなスライドメニュー
６．サムネイル付きクロスフェードスライドショー

補助
７．Google Analytics／クリック数を取得・表示させる
８．郵便番号から住所を自動的に補完
９．フォーム入力の達成率をグラフで表示
１０．読むのに後何分かかるか表示
１１．離脱時にアラート
１２．ボタンに直接ローディングアニメーション

メニュー
１３．ナビゲーションを最上部に固定
１４．アコーディオン
１５．タブメニュー
１６．縦方向にスクロールするティッカー
１７．上部固定メニューをクリックで開閉する

ビジュアル
１８．チュートリアルを作る
１９．年表／横軸のタイムラインを表示する
２０．地震分布図を作成
２１．おしゃれグラフを表示
２２．カレンダー
２３．可変グリッド

画像／写真
２４．写真にぼかしを入れる
２５．カラー写真を白黒に
２６．画像切替
２７．画像ギャラリー
２８．リサイズ

マウスホバー・クリック
２９．オーバーレイで注釈を表示
３０．ツールチップ（吹き出し）
３１．ポップアップ
３２．マウスオーバー

jQuery入門・使い方
jQuery入門（初心者）
リファレンス（中級者）
プラグイン作成

スクロール

１．ページ内リンク／フッターまわり／トップに戻る

Linksscroll_jQ

定番だけど、必ず知っておきたい。下部までスクロールすると「シュッ」と横からスライドして出てくるもの、右下におすすめ記事などを出したり、どこかで見かけた定番のフッターまわりやスクロール系。

２．パララックス

Parallax_jQ

パララックス（視差効果）を取り入れる方法。要はjQuery Parallax Plugin Demoみたいな感じです。

スライド

Carousel_jQ

マウスホイール、スワイプ設定、レスポンシブ対応、上下左右の違う画像もOK。と機能が豊富だったので。

４．レスポンシブなスライダー

Slidersresponsive_jQ

これも定番。レスポンシブなカルーセルタイプのスライダー。オプションで縦スライド・ランダム表示などもできる。

５．ヌルヌルサクサクなスライドメニュー

スライドアニメーションを滑らかに動かす方法として、CSS3を使っていたという。サンプルページはiPhone5でのみ確認できます。

６．サムネイル付きクロスフェードスライドショー

fadeslideshow_jQ

画像を自動でクロスフェードで切り替え。もちろん、レスポンシブ対応でした。

補助

７．Google Analyticsでクリックカウント

G_Analytics_jQ

google AnalyticsでクリックカウントするjQueryコード。外部・内部リンクもカウントする。これ副業している人は必須ですよ！

８．郵便番号から住所を自動的に補完

郵便番号から住所を自動的に補完してくれる jQueryプラグイン。通常版と、スペース・改行圧縮版のminifyがある。

９．フォーム入力の達成率をグラフで表示

graphical_jQ

意外とありそうでなかった。フォーム入力時に「現在○○%進んでます」と進捗状況を表示する。入力項目が多くなりそうなフォームにどうぞ。

１０．読むのに後何分かかるか表示

long_read_jQ

スクロールの位置を取得し「この記事を読むのに○○分かかります」といった表示をしてくれる。つい長文を書いてしまう人は、このプラグインをつけてみてはどうでしょう。

１１．離脱時にアラート

detaching_jQ

記事に書かれているとおり、どういったシーンで使うの？と思ったんですが、フォームなどのページ遷移で使うといいんですね。地味だけど覚えていて損なしです。

１２．ボタンに直接ローディングアニメーション

loading_jQ

たかがローディング効果だと侮ってはいけません。下に伸びたり、中心に向かって降りてきたり。ちょっとした効果だからこそこだわりたいですね。

メニュー

navi_jQ

ヘッダーの一番上にメニューなどをピタッと固定させる。こちらもjsの「scrollSpeed」の数値で速度を調整出来ます。

１４．アコーディオン

Accordion_jQ

メニューを開閉するアコーディオン。矢印が回転するもの良いですね。そういえば、僕も最初に勉強したのがアニメーション効果やイベントの（hide/show/click）でした。丁寧なチュートリアルで参考になります。

１５．タブメニュー

Tabmenu_jQ

jQueryを使ったタブメニュー。フェードインやスクロール等のアニメーション付き。

１６．縦方向にスクロールするティッカー

vertically_jQ

縦方向にスクロールするティッカー。場所を多く取れないレイアウトなんかで活躍できそうです。

１７．上部固定メニューをクリックで開閉する

fixed_jQ

クリックで開閉する吹き出しメニュー。Facebookの上部で見かけるあれです。メニューの三角形は画像かと思いきや、やはりCSSです。

ビジュアル

１８．チュートリアルを作る

tutorial_jQ

クリックでチュートリアル、手順説明を出す。キャプチャ撮って説明文が面倒だという時に。

１９．年表／横軸のタイムラインを表示する

chronology_jQ

横軸で年月を表示する。クリックで指定の要素を表示できる。

２０．地震分布図を作成

earthquake_jQ

igMapというコントロールを用いて、地震分布図を作成。

２１．おしゃれグラフを描画

graph_jQ

棒・線・円グラフ何でもOK。フラットデザインで綺麗なビジュアルなので、ブログやHPで使いたくなっちゃいますね。調査や統計の記事を書く場合に説得力が出そうなので、これは実装必須です。

２２．カレンダー

Calendar_jQ

24種類からテーマを選び適用するDatepickerの使い方。ブログだけじゃなくて、通販サイトなんかでも使えます。

２３．可変グリッド

grid_jQ

グリッドで隙間を計算しながら並べ替えるボックス整列系のプラグイン。ヌルヌル動くのがポイント。グリッド要素の表示/非表示を切り替えれるようになったとのことです。

画像／写真

２４．写真にぼかしを入れる

blur_jQ

フラットデザインに合いそうなjQueryプラグイン。これすごい良いですね！ブラウザに依存する部分はあるのですが、Photoshopでいちいちぼかしを入れる必要がなくなると。ブログのアイキャッチ作成が相当楽になりそうです。

２５．カラー写真を白黒に

photos_jQ

これも面白いですよ。通常時は白黒だけどマウスオーバーした部分だけカラー写真になるという、目を引かせるための効果です。

２６．画像切替

Imageswitching_jQ

フェードイン、スクロールアウトはもちろん「ダブルドア」のように上下から挟み込むように画像が消えるものもあります。

２７．画像ギャラリー

Imagegallery_jQ

画像ギャラリー用のプラグインまとめ。Fancybox、レスポンシブ対応のColorboxなど色々。

２８．リサイズ

Resize_jQ

サイズを無理やり合わせると、画像が伸びてしまう。そんな時は画像のサイズ統一とトリミングをしてくれるMyThumbnail。

マウスホバー・クリック

２９．オーバーレイで注釈を表示

annotations_jQ

オーバーレイで要素に注釈を表示するプラグイン。サイトの説明やヘルプなんかに使えそうですね。

ツールチップ（吹き出し）

Tooltip_jQ

マウスを乗せると、吹き出し風のツールチップを出します。WordPress有料テーマなどで最初から入ってるものもありますが、入ってなければこれで。

JavaScriptのwindow.openと同じように、ポップアップで別ウィンドウを開く。

３２．マウスオーバー

プラグインを使わないマウスオーバー系アニメーション。フェイドでテキスト色・背景色・ずらしなど色々ある。

jQuery入門・使い方

jQuery入門（初心者）

jQueryがこの上なく分かる、スライド中心の初心者さん向けリンクです。準備、書き方、メソッドなど。すでに分かる人も、復習として見てみましょう。

リファレンス（中級者）

JQueryの説明が簡単で丁寧に載っているサイトを中心にまとめ。

プラグイン作成

jQueryプラグインの作り方を、最も分かりやすく書いてあるサイト、スライドをメモしておきます。

以上サイト制作やブログに必須になっているjQueryのプラグインやコードまとめでした。

スポンサード リンク

関連記事

Comments

Leave a Comment

コメントする

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