本記事では、私も実務で使っているおすすめのプラグインをご紹介していきます!
詳細は、各プラグインごとに記事を作成していますので、そちらをご覧ください。
matchHeightで要素の高さを簡単に揃える!
matchHeightは、隣り合う要素を簡単に揃えてくれるプラグインです。
単純に要素の高さだけを揃えたいのであれば、flexプロパティを使うよりも簡単に実装できます。
See the Pen matchHeight(要素の高さを自動で揃える) by 1buk1 (@1buk1) on CodePen.
jQuery matchHeightで隣り合う要素の高さを揃える!CDNを使った簡単な導入方法。では簡単な使い方とデモサイトを用意しています。
matchHeightというjQueryプラグインを見つけて、使い方を調べたので、備忘録として残しておきます。 jQueryプラグイン「matchHeight.js」の基本的な使い方 隣り合う要素の高さを揃える方法 CDN[…]
rellax.jsで簡単にparallax効果を付与する方法!
parallaxってご存知ですか?
日本語でいうと「視差効果」という意味になります。
Webサイトなどで、立体感や遠近感をつけたデザインがあると思いますが、あれがparallaxです!
ユーザーの興味を引きるけるような、独特の表現をさせることができます。
rellax.jsを使えば、parallaxが簡単に表現できます。
See the Pen rellax.js(parallax) by 1buk1 (@1buk1) on CodePen.
rellax.jsの使い方。では、実装方法とオプションによるカスタマイズ方法をご紹介しています。
rellax.jsを使って、サイトにパララックス(視差効果)を実装しました。rellax.jsは、ファイルの読み込みと簡単な記述で使用できます。しかし、対象となる要素の動きを制御しないと、対象の要素が画面外に移動してしまったりと、思った[…]
imageMapResizer.js!イメージマップのリンク先をレスポンシブに対応させる!
mapタグを使って、画像に複数のリンクを貼ったとき、画像の拡大縮小に合わせてリンク先を移動させるプラグインがあります!
画像は、ウインドウサイズや、親要素によってサイズが変わってしまうので、画像に複数のリンクを貼る場合は、必須のプラグインになります。
詳しい設置方法は、イメージマップの使い方と合わせてイメージマップの作り方!画像に複数のリンクを貼り、レスポンシブにも対応させる!に記載しています。
業務中に1枚の画像の中に複数のリンクを貼らなければならない案件が発生しました!はじめてのことだったので、全く意味がわからず、「そんなことできるの???なにそれ???」状態でした。とりあえず、調べて実装できましたので、記録として残しておきま[…]
まとめ
jQueryのプラグインには、簡単に実装でき、すばらしい効果をもたらしてくれるものがたくさんあります!
自分でjQueryを組むのは、難しいので、どんどん積極的に使っていきましょう!
ひとつ注意点を述べると、プラグインの元となるデータは、必ずダウンロードしてからファイルとして読み込ませるようにしましょう。
CDNはとても便利な機能ですが、読み込み先のデータが更新、また配信停止などされてしまったとき、知らず知らずのうちに表示が崩れたりして、サイトが崩壊してしまう危険があります。
これは、すべてのプラグインに言えることですので、ぜひ覚えておいてください!