jQueryはついつい入れすぎてしまうと途端にサイトが激重になるので注意が必要ですが、JavaScriptよりもコード量が比較的少なく、簡単に実装ができるので非常に便利です。
特にサイトのデザインが大枠で完了したら、簡単に実装できるjQueryで味付けをしても良く、各ライブラリを知っていることで仕様を折込んでデザインすることができるなど、表現の幅も広がります。
そこでこの記事では、初心者でも実装が簡単で、LPやサイトの味付けによく使うjQueryライブラリまとめについてご紹介します。
この記事は、記事追加次第それに応じて更新しています。
目次
ヘッダーのjQuery
ヘッダー周りはFV(ファーストビュー)にも含まれるので、仕様とデザインはじっくり検討して決めることが多いですが、仕様が決まればjQueryで簡単に実装することが可能です。
スクロールでヘッダーの表示・非表示
特にスマホで、文字量が多めのページや、写真が大きめのデザインで、常時本文のエリアを広く取りながら回遊しやすいサイトを作る時に使っています。
使う時、対象となるヘッダーブロックのheight が大きすぎるとユーザーもびっくりしてしまうので、ヘッダーブロックのサイズ調整も一緒に行う必要があるjQueryです。
jQueryのコピペでできるSANGOのヘッダーをスクロールで表示・非表示で切り替えるスニペット
レスポンシブでアコーディオンになるヘッダー
LPのブロックに、それぞれアンカーで飛ばすメニューを作る時によく使うアコーディオン型のヘッダーです。
子階層があるサイトなど、階層が深くページ数が多数ある場合は、このjQueryは不向きですが、簡単に設置できるので重宝しています。
jQueryのコピペでできるアコーディオンヘッダーのレスポンシブデザインテンプレート
ドロワー
スマホでよく見かけるドロワーを簡単に実装できるjQueryで、メニューに入れ込む量によって、主にこのドロワーとアコーディオン使い分けすることが多いです。
これをベースにして、CSSでデザインを変えることも簡単にできるイケてるjQueryです。
jQueryライブラリDrawerのコピペでできるドロワーメニュー
スクロールしたら上部に固定
ページを下部にスクロールしていき、ファーストビュー下にあるメニューエリアを通過すると、上部にそのメニューが固定表示。
よくLPとかで使うスクロール系のjQueryです。
jQueryのコピペでスクロールしたら上部に固定させるスニペット
一定量スクロールしたらアニメーションして上部に固定
上記のスニペットに近いスニペットですが、こちらは上部から下に落ちてくるようなアニメーションで、その後上部に固定表示します。
jQueryのコピペでヘッダーにアニメーションをつけて固定表示させるスニペット
レイアウトのjQuery
レイアウトは基本CSSで組みますが、お風呂のタイルのような均等なグリッドを作る時など、更新頻度が多く、都度CSSで調整する時が面倒な場合使います。
グリッドレイアウト
イラストや写真などの画像を使って、綺麗なグリッドをCSSで調整せずレスポンシブデザインに対応しようと思った場合、お世話になっているjQueryです。
このタイリングのレイアウトに、CSSの z-index と absoluteを使って色々レイヤーを重ねて使うと色んな表現ができます。
jQueryのコピペでタイル状のグリッドレイアウトができるRect Grid Helper
インタースティシャルなjQuery
トップページ限定や、ユーザーが主体的に見たいと思ってくれた場合に、ストレスにならず、きちんと表示をさせたい場合によく使うjQueryです。
いわゆるモーダルも、ここの分類です。
拡大画像をポップアップで表示
単体で使うことはなく、スライダー・カルーセルとセットで使うことが比較的多いjQueryです。
とは言え、最近はスライダー・カルーセルにも標準で拡大して表示させる機能があるので、あまり使わなくなりました。
コピペでできるlightbox2を使ったギャラリーの表示
インタースティシャルとは、メインのコンテンツを覆い隠すように表示されるポップアップ。
いわゆるモーダルで、強制的に表示されてしまう、かなり強制力が強いUIなので、使う時は結構慎重に使うことが適切かどうかを検討しますが、使う場合このjQueryのcookieなしで実装することが多いです。
jQueryのコピペでcookieを使って初回アクセス時にモーダルを表示させるスニペット
YouTubeやvimeoの動画モーダル
モーダルはCSSでも実装できますが、YouTubeやvimeoの動画を組み合わせて動画を再生した場合、動画を停止せずにモーダルを非表示にしても再生が止まりません。
その為、動画をモーダルで表示する場合だ、このjQueryが勝手に制御してくれるので非常に重宝します。
また、フワッと表示される感じでそこまで強い感じがしないのも、GOODなポイントです。
jQueryライブラリmodal-videoのコピペでできるYouTubeやvimeoの動画モーダル
画像や動画のモーダル
モーダルの実装自体の難易度は難しくないですが、できることなら簡単に実装したい時に活躍するのが、このjQueryライブラリFancyboxです。
簡単なので、このライブラリを使うことが最近多いです。
jQueryライブラリFancyboxのコピペでできる画像や動画のモーダル
スクロールしてYouTubeが表示されると自動で再生
YouTube Inview Autoplayは、ページ内に埋め込んだYouTubeの動画がウィンドウ内に表示されると、自動的に再生・停止するjQueryプラグインです。
ウィンドウ内に動画が入ると再生されるので、ユーザーが再生しなくても一番最初から見て欲しい時など、スクロールを挟んで見せたいYouTubeの動画がある時に役立ちます。
jQueryライブラリYouTube Inview AutoplayでYouTube動画がウィンドウ内に表示されたら自動で再生を開始
アニメーション系のjQuery
デザインとコーディングが終わり、インタラクティブな味付けによく使うjQueryです。
スクロールでふわっとフェードイン
それぞれのオブジェクトまでスクロールした時、上下左右の方向を任意で指定したアニメーションを付与します。
これは簡単な記述でできてしまうので、デザインの中で強調したい箇所にピンポイントでよく使います。
簡単にできてしまう故、逆に入れすぎてしまうとチラチラしすぎてしまうので適度に使うことが大切です。
jQueryのコピペでできるスクロールでふわっとフェードインさせるスニペット
要素を任意の形でアニメーションさせながら表示
ScrollRevealという、jQueryでなくJavaScriptのライブラリですが、必要な記述が少なく、オプションを指定することで様々な動きが可能なのでかなり重宝しています。
非常に簡単にアニメーションをつけることができるので、オススメです。
JavaScriptのScrollRevealを使ったスクロールアニメーション
jQuery無しでスクロールアニメーション
LPのシングルページにわざわざjQueryを読み込ませるのはサイト自体のサイズも多少増えてしまうので、その場合はこのAOSというJavaScriptのライブラリを使っています。
JavaScriptを色々と書く必要がなく、簡単に実装ができてしまいます。
jQuery無しでスクロールアニメーションを実装できるJavaScriptライブラリAOS
スライダー・カルーセルのjQuery
限られたスペースで、多少多めのコンテンツブロックを作る時に使うjQueryです。
スライダーの定番 slick
スライダーUIの超定番ともいえるslickで、細かい動きも指定して制御することができるので、本当にお世話になっているjQueryです。
slickは本当にお世話になっています。
もちろんですが、スマホのスワイプにも対応しています。
jQueryライブラリの定番、slickのコピペでできるスライダー・カルーセル
slickはカスタマイズもパラメータででき、本当に便利なjQueryライブラリです。
この記事では、そんなslickを使って、要素の高さを揃えて表示させる方法とデザインについて解説しています。
jQueryライブラリslickの要素の高さを揃えて表示させるデザインスニペット
jQuery不要のスライダー Swiper
スライダー・カルーセルUIの超定番とも言えるSwiper.jsです。jQueryスライダーの分類に入れてしまっていますが、このライブラリは、jQuery不要で実装できます。
カスタマイズも容易なのも非常に嬉しいところです。
スライダーの超定番ライブラリSwiper.jsの基本と使い方
YouTubeや画像のギャラリースライダー
画像だけでなくYouTubeの動画も簡単にスライダーで表示することができるので、YouTubeと使う場合と、画像をクリックして全画面で表示するUIを実装する場合、このFotoramaをよく使います。
jQueryライブラリFotoramaのコピペでできるYouTubeや画像のギャラリースライダー
縦のスライダー
横型のスライダーが使えない場合に、縦のスライダーが作れます。画像切り替えのポインタの位置と、大きさの調整が必要で、全体感を見ながらCSSをいっぱい追記して使っています。
jQueryのコピペでできる縦にスクロールするスライダー・カルーセルのスニペット
アコーディオンのjQuery
よくある質問など、一つの情報に紐づくコンテンツ量が多い場合によく使うjQueryです。
アコーディオン
よくある質問ページで使うjQueryです。また、カスタマイズもしやすく、LPでは「不安の解消」を目的に、CTAの直前に実装することが多いUIです。
よくある質問ページに使えそうなjQueryのアコーディオンUI
テーブルのjQuery
HTML4でよく使われていたtable タグに挙動を加えるjQueryです。
テーブルにソート機能を追加
tableタグを使って、表組みのテーブルレイアウトで使うjQueryで、列数が多く左端にNo1・No2などのナンバリングがある場合によく使うjQueryです。
このナンバリングがない場合に実装すると、なんだかよく分からないソートがかかってしまうので、その場合にソート機能は付けない方が逆に親切な気がします。
コピペでできるテーブルにソート機能を実装するjQueryライブラリtablesorter
棒グラフのjQuery
グラフはjQueryを使い実装することは少なく、イラストレーターの画像で作ってしまうことが多いですが、ごく稀に使います。
横棒のグラフ
棒グラフはCSSだけでも実装することができますが、ソースになる数値が変わった場合、CSSを色々書き換える必要があり面倒です。
そこでjQueryを使うと簡単に更新ができ、動きもつくので重宝しています。
HTMLとCSSのコピペでできる横棒グラフ
目次を作るjQuery
特にブログで、h2 などのタグを指定して目次を作ってくれるjQueryです。WordPressではプラグインで対応できますが、それ以外でも使えるので便利です。
タグを指定した目次の生成
HTMLはすごくシンプルで、jQueryのカスタマイズも容易なので使いやすいライブラリです。
jQueryを使ってWordPressのプラグインなしでTOC+風の目次を実装するスニペット
文字を装飾・変更するjQuery
ページ内のテキストのサイズや色を変えたり、文字数を短縮させたりするjQueryです。
指定の文字数に短縮
文字数を制限したい時に指定の文字数に短縮して、その末尾に文字を入れるjQueryです。
WordPressのタイトルを関数を使わず動的に出力させて、文字数を短縮させたい時に使ったりします。
jQueryのコピペで指定の文字数に短縮して、その末尾に文字を入れるスニペット
テキストを一文字づつサイズや色を変更
1文字ずつ異なる文字色や、サイズを変更して表示ができるjQueryのコードです。
WordPressの日付箇所をいじる時によく使っているスニペットで、コードがシンプルなのでカスタマイズも容易で非常に使いやすいです。
jQueryのコピペで文字のサイズや色の変更を加えるスニペット
数字をカウントアップしながら表示
Webページに数字をそのまま載せず、数字に動きや装飾をつけたりして違った印象を持ってもらいたい時に使います。
個人的には、2桁程度の数字だと「で、何？」的な感じになるので、3桁以上の数字で使うとハマります。
jQueryのコピペで数字をカウントアップしながら表示するスニペット
文字の置換・削除
静的なページでの実装はそんなに使わないですが、WordPressなどのCMSで使うことが多く、何かの文字を一律で置換・削除できてしまいます。
jQueryのreplace()を使って文字を置換・削除するスニペット3選
複数の文字列や要素を置換・削除
こっちは、複数の文字列や要素を置換。そして削除するスニペットです。
元ネタの文字列を直接変更することができない状態で、表示させる側で文字列を置換・削除したい場合に使っています。
jQueryのコピペで複数の文字列や要素を置換・削除するスニペット
フローティングのjQuery
フローティングは位置が固定されているUIです。フローティングのUIはスクロールに応じて追従してくれるので、ユーザーに常時見せたいものがある場合に使います。
フローティングメニュー
比較的昔からあるfloater.jsを使ってフローティングメニューの実装に使います。
メソッドを変更するといろんな挙動を表現できるので便利で、色々な動きを出すのにjquery.easing.jsのjQueryとセットにして使います。
jQueryのコピペでフローティングタイプナビゲーションのスニペット
ページ切り替え時のアニメーション
ページ内のコンテンツ量が多く、ページ遷移のアクセントに使うローディングアニメーションです。
ローディングアニメーション8種
8種類の中から、簡単なコピペで実装できるローディングアニメーションです。
CSSの色味変更が簡単で、トンマナも合わせやすいのでページコンテンツが多めの時に使ってます。
個人的には「大きめの円がグルグル」回るのを使っています。
HTMLとCSSのコピペでできるローディングアニメーション8種
JavaScriptのローディングアニメーション
JavaScriptでできるローディングアニメーションです。
jQueryではなく、JavaScriptなのでjQueryの記述が不要なので簡単です。
Javascriptのコピペでできるページ切り替え時に丸がグルグル回るローディングアニメーション
カスタマイズがしやすいローディングアニメーション
画像や、CSSのカスタマイズがしやすいローディングアニメーションです。
汎用性が高いので、レンダリングに時間がかかる場合に使っています。
jQueryのコピペでできるページ切り替え時のローディングアニメーション
14種から選べるプログレスバー
PACEは、そんなプログレスバーをHTMLを記述することなく、jsとCSSのコピペだけで実装できてしまう、超優れ物です。
全14種類のテーマをコピペするだけで使うことができるので、重宝しています。
JavaScriptライブラリPACEのコピペでできるプログレスバー
JSONをいじるjQuery
おなじみJSONのデータを取得して整形するjQueryです。
単一のページでコンテンツを切り替える「SPA（シングルページアプリケーション）」のように運用もできてしまいます。
WP REST API
WP REST APIは、WordPressのデータベースの情報をJSON形式で取得できるAPIで、WordPress4.7から標準搭載されています。
WP REST APIを使うことで、他のサイトの記事の情報を取得して表示することができます。
WP REST APIのJavaScriptで他のWordPressの記事をJSONで出力
ページネイションのjQuery
ページネイションは、ページ内の文字やコンテンツが多い場合に使われる「ページ送り」等呼ばれるもので、ページを複数のページに分割します。
そんなページネイションが可能なjQueryです。
簡単に実装できるpaginathing.js
それぞれに分けられたページは、別途URLが別になったりせずに生成されるので、cannonical でURLの適正化もする必要がありません。
paginathing.js はそんな煩わしさがなくできる超便利なライブラリです。
jQueryライブラリpaginathing.jsのコピペでできるページネイションのスニペット
「もっと見る」ボタンクリックで要素を展開
ページネイションとは異なり、複数のページに分割はしませんが、要素を指定した数量に分け表示・非表示を行うので、この分類にしています。
以下のスニペットは、ググった時の検索結果のようなものを最初は一部表示させ、それ以降の内容については「もっと見る」で少しずつ表示させます。しかも結構簡単に実装できます。
「もっと見る」ボタンクリックで要素を展開するjQueryのスニペット
