知っておくと便利なjQueryのプラグインまとめ

(1)1ページずつスライドできるOne Page Scroll

『Black Everyday Company』は、JavaScript・C#・VBA等の情報がエントリーした、プログラミングノウハウが詰まったサイト。サーバ関連の仕事に携わるダーシノさんが、言語の使い方、エラー対処などそれぞれわかりやすく解説してくれます。

その中に、jQueryプラグインに関する記事があったのでご紹介します！
タイトル名は《スライドショーみたいに1ページずつスクロールするウェブサイトをつくる》。

スライドショーのように1ページずつ流れるシステムを作るために使用するのが、"One Page Scroll"というプラグインです。
軽量でシンプルに仕上げるなら、このツールを使うのがベターなのだそう。

記事中では、"One Page Scroll"のパラメータがひとつひとつ説明されています。スライドショーのアニメーション時間をms単位で指定したり、キーボードで操作できるようにしたり…とカスタマイズが可能なので、参考にしてみるといいでしょう。

さらに、JavaScript・HTML・CSSのコードもしっかり記載してあるため、初心者の方も安心です！
"One Page Scroll"の使い方をマスターして、ネットユーザーを惹きつけるサイトを作成してみては？

【参照元】
『Black Everyday Company』  

(2)アニメーションが実装できるjQueryプラグイン12選

jQueryは、複雑になりがちなJavascriptのコードをシンプルにまとめることができるライブラリ。
Webデザインの仕事をしている方の中にも、jQueryユーザーは多いことでしょう。

そこでここでは、Webデザインする際に、ページ内にアニメーションを実装するときに役立つjQueryプラグインのことが書かれた《Webページの隠し味に！アニメーションが実装できるjQueryプラグイン12選》という記事を紹介したいと思います。

この記事はコーディングの代行に特化した『くまWEB』に掲載されており、"Animate.css"、"Hover.css"、"Velocity.js"などをはじめ、バラエティー豊かなアニメーションが添付できるプラグインがラインナップ！

12個すべてにその特徴を記したコメントが添えられているので、ニーズに合わせたプラグインの選定に役立つのではないでしょうか？
ぜひ、インパクトやユーザビリティを追求したWebサイト制作の参考にしてくださいね。

【参照元】
『くまWEB』  

(3)スムーススクロール用のプラグインをnpmにあげた話

WordPressのテーマ、プラグイン開発、Webサイトの構築などを行っている『モンキーレンチ』の代表であるキタジマタカシさんは、以前Webページ内のリンクをスムースにスクロールさせるjQueryプラグインを作りました。

しかし、制作時にGitHubから手動でダウンロードして設置するようにしていたため、JavascriptライブラリやjQueryプラグインをnpmで入れていたキタジマさんは、手間がかかる点が気になっていたんだとか。
そこで、スムーススクロールのプラグインをnpmにあげることにし、メンテナンス性を考慮した上でコードも書き換えたそうです。

こちらの記事《スムーススクロールの jQuery プラグインを npm にあげるようにしました》には、その詳細が書かれています。
利便性を増すために、さらに手を加えることも検討中とのことなので、スムーススクロール用のプラグインに関心をお持ちの方は、一度目を通してみてはいかがでしょう。

【参照元】
『モンキーレンチ』  

(4)parallax background.jsの使い方

パララックスは、視差効果のあるWebサイトを制作するときに用いられるエフェクトの1つ。
jQueryには、このパララックス効果を実装できるプラグインがあります。そこで注目してほしいのが、プラグインの具体的な使用方法が書かれた《jQueryプラグイン parallax background.jsの使い方》という記事です。

ここで紹介されているプラグインは"parallax background.js"。
背景のみのスクロールに対応するパララックスプラグインですが、シンプルな設定なのがポイントです。
記事にはデモ版と一緒に、ダウンロード方法をはじめ、CSSの編集、HTMLの編集、オプションなどについて記載されているので、"parallax-background.js"の詳細を知るのにおすすめですよ。

また、この記事を執筆したいっせいさんのブログ『いつか誰かの役に立つかもしれないweb制作屋の備忘録』には、他にも便利なjQueryプラグインを紹介した記事がエントリーしています。

アクセスすれば、業務の幅を広げてくれるTipsやアイデアをキャッチできるかもしれませんよ。

【参照元】
『いつか誰かの役に立つかもしれないweb制作屋の備忘録』  

(5)スマホにも対応可能な画像表示プラグインLightbox

Webサイトの制作・運用・集客などを行っているフリーランサーのほーくえーすさんが綴る『ほーくブログ』。その中に、レスポンシブWebデザインに画像ビューアを埋め込む時に便利なプラグインの記事があったので紹介します！

タイトルは、《[jQuery]スマートフォンにも対応してる画像表示プラグイン》。
ほーくえーすさんの記事によると、jQueryプラグインの"Lightbox"には、オリジナル版とLightbox（Boxer）とがあり、どちらもクリックで画像が切り替わる仕様になっているそうです。

しかし、スマホへの対応も視野に入れた場合は、後者の方がUI的に優れていると感じたとのこと。
そこで、ユーザーエージェントの重要性を感じているほーくえーすさんは、記事内でオリジナル版とLightbox（Boxer）の基本的な使い方を説明してくれています。

jQueryで画像をしっかりと見せるサイトを制作するときには、ぜひ"Lightbox"の導入も検討してみると良いのではないでしょうか。
目的に合わせて使い分けると、より一層視覚的効果が期待できることでしょう。

【参照元】
『ほーくブログ』  

(6)サイトに手軽に目次機能を付加できるプラグインTOC

「Webページに目次機能を付ける」
その動作をより簡単にするjQueryプラグインに"TOC"があります。

『寝ログ』の運営者わいひらさんも、"TOC"の使い勝手の良さに魅了された一人。
ブログ内の《サイトに手軽に目次機能を付加できるjQueryプラグイン「TOC」》の記事に、"TOC"の特徴と目次を作成する手順がわかりやすく書かれていたので紹介します。

記事中では
・TOCサイトからスクリプトをダウンロード・設置する方法
・CSSの記述内容
・スクリプトの記述内容
の順に"TOC"の利用方法が説明されています。
スクリプトに関しては、WordPressテーマの利用例・コードの説明など、詳細に言及してあるので必見です。また、同ページの左サイドに、実際に"TOC"で作成した目次サンプルを付けてくれているのも嬉しい点です。

「軽量・カスタマイズ性が高い・お手軽操作」の三拍子が揃った"TOC"。その使い勝手の良さを、ぜひ自分で確かめてみてはどうでしょう？

【参照元】
『寝ログ』  

(7)無限スクロールを可能にするInfinite Scroll

次の記事や画像がキリなく表示される「無限スクロール機能」は、facebookやtwitterでも適用されています。
jQueryプラグイン"Infinite Scroll"を使えば、この無限スクロールを組み込んだサイトの作成が可能になります。

「無限スクロール機能を活用してみたい」
そんな方におすすめの記事がこちら《jQueryプラグイン「Infinite Scroll」と「Masonry」を利用して無限スクロールのギャラリーを作成する方法》です。
ギャラリーを"Masonry"でタイル状に並べ、"Infinite Scroll"で無限スクロールを実現させる方法が詳しく書かれています。

「手動リロード」「自動リロード」の2タイプの作成方法が記載されており、それぞれデモ版が紹介されているので、両者の違いもチェックできますよ！
添付されたコードのスクショをお手本にしながら、無限スクリーンの実用スキルを身に付けてみては？

また、サイト『I'll be NET』にはjQuery・CSS情報の他、豊富なWeb制作のマメ知識が掲載されています。為になる情報満載なので、空いた時間に気になるテーマをチェックしてみてくださいね！

【参照元】
『I'll be NET』  

(8)スライド毎にポーズ時間を設定できるbxSlider

「Webページ内のスライドのポーズ時間を個別に変えたい！」
そんな要望に応えてくれる、おすすめ記事が掲載されているのが、『NxWorld』のサイト。
《bxSliderでポーズ設定をスライド毎に変更する方法》の記事に、1枚目は5秒、2枚目は10秒…、というように、スライドのポーズ時間の設定を変える方法が書かれています。

筆者のNaoyaさんは、上記の設定をjQueryプラグインの"bxSlider"で行っています。
記事には5枚のスライドを用いたケースを例に挙げて、サンプルコードや実際の動きを確認できるデモが添えられているので、プログラミングのイメージがしやすいのではないでしょうか。

それぞれに異なる画像のポーズ時間を設定するのに便利なプラグインは他にもありますが、"bxSlider"のTipsとして覚えておくと役立つシーンがあるかもしれませんね。

【参照元】
『NxWorld』

ITエンジニア・Webクリエイターの転職ならレバテックキャリア

レバテックキャリアはIT・Web業界のエンジニア・クリエイターを専門とする転職エージェントです。最新の技術情報や業界動向に精通したキャリアアドバイザーが、年収・技術志向・今後のキャリアパス・ワークライフバランスなど、一人ひとりの希望に寄り添いながら転職活動をサポートします。一般公開されていない大手企業や優良企業の非公開求人も多数保有していますので、まずは一度カウンセリングにお越しください。

転職支援サービスに申し込む

また、「初めての転職で、何から始めていいかわからない」「まだ転職するかどうか迷っている」など、転職活動に何らかの不安を抱えている方には、無料の個別相談会も実施しています。キャリアアドバイザーが一対一で、これからのあなたのキャリアを一緒に考えます。お気軽にご相談ください。

「個別相談会」に申し込む