水曜日, 9月 03, 2014

すごい!便利!「jQuery」の小技まとめ32

この上なく便利!すごい「jQuery」の小技まとめ32

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


もくじ

マウスホバー・クリック
29.オーバーレイで注釈を表示
30.ツールチップ(吹き出し)
31.ポップアップ
32.マウスオーバー


スクロール

1.ページ内リンク/フッターまわり/トップに戻る

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

2.パララックス

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


スライド

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

4.レスポンシブなスライダー

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

5.ヌルヌルサクサクなスライドメニュー

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

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

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


補助

7.Google Analyticsでクリックカウント

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

8.郵便番号から住所を自動的に補完

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

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

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

10.読むのに後何分かかるか表示

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

11.離脱時にアラート

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

12.ボタンに直接ローディングアニメーション

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


メニュー

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

14.アコーディオン

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

15.タブメニュー

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

16.縦方向にスクロールするティッカー

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

17.上部固定メニューをクリックで開閉する

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


ビジュアル

18.チュートリアルを作る

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

19.年表/横軸のタイムラインを表示する

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

20.地震分布図を作成

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

21.おしゃれグラフを描画

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

22.カレンダー

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

23.可変グリッド

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


画像/写真

24.写真にぼかしを入れる

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

25.カラー写真を白黒に

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

26.画像切替

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

27.画像ギャラリー

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

28.リサイズ

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


マウスホバー・クリック

29.オーバーレイで注釈を表示

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

ツールチップ(吹き出し)

Tooltip_jQ
マウスを乗せると、吹き出し風のツールチップを出します。WordPress有料テーマなどで最初から入ってるものもありますが、入ってなければこれで。
JavaScriptのwindow.openと同じように、ポップアップで別ウィンドウを開く。

32.マウスオーバー

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


jQuery入門・使い方

jQuery入門(初心者)

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

リファレンス(中級者)

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

プラグイン作成

jQueryプラグインの作り方を、最も分かりやすく書いてあるサイト、スライドをメモしておきます。
以上サイト制作やブログに必須になっているjQueryのプラグインやコードまとめでした。



Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)