Webサイト制作でよく使うjQueryプラグイン

Webサイト制作でよく使うjQueryプラグイン

こんにちは、ちゃんけいです。
最近SNSを見る癖をつけないとなぁと思いながらすごしています。

今回は、Webサイト制作をする際に使う機会が多いjQueryのプラグインを紹介したいと思います。

検索すると多くのプラグインがでてくると思います。あまり使い慣れてない方の判断の助けになれば幸いです。

スライダー、カルーセル系

Webサイト制作の際、必ずと言っていいほど使うのがこのスライダー系プラグイン。

メインビジュアルなどで良くありますね、見栄えがよくカスタマイズしやすいプラグインがおすすめ。

bxslider

公式サイト←のサイトからダウンロードできます。

bxskiderの特徴は、divごとスライドさせることができます!( え? )

簡単に言うと、文章や画像を一緒にスライドさせることができます。とっても簡単に。

個人的な印象ですが、cssやjsもわりといじりやすい印象です。あと、一番使ってるスライダー系プラグインな気がします。

slider-pro

公式サイト←このサイトからダウンロードできます。

こちらは、全画面スライダーや画像ナビゲーションがある時によく使います。

こちらは、divごとうごかそうとするとfadeの動きを実装したときとかにバグるので注意が必要です。

vegas

公式サイト←こちらからダウンロードできます。

ものすごいおしゃれなサイトのスライダー。

vegasのすごいところは、背景画像のスライダーを作ることができる!というところ。

なかなか他にはない機能ですね、しかもtransitionの動きが豊富にあってテンションも上がります。最高ですね。

個人的にすきあらば使いたいプラグインです。

動かない時は、お使いのjQueryのバージョンがあってないことがほとんどですのでお気をつけて。

 

lightbox系

画像をクリックすると、ポップアップ的に拡大表示できる類のプラグインです。

ギャラリーによくつかいますね、あとは注意書きとかにも使います。

lightbox

公式サイト← ここからダウンロードできます。

画像をポップアップするならこれにおまかせあれ!というのがこちら、実装がとっても手軽で情報がおおいのがうれしいところです。

グループ化したり、ナビゲーションつけたりと大体のことができます。

Magnific Popup

公式サイト←こちらからダウンロードできます。

先日こちらのブログでも紹介しました。このプラグインはだいたいのことができます。

若干初めて使う方には、わかりにくいのがすこし残念ですが、、、、

高さ揃え系

要素の高さを一定に揃えたい!なんて時ってよくありますよね、flexboxを使って高さを自動でそろえることもできますがそれはごく一部。

とにかく高さをそろえたいんだ!!!!というかたはこちらをどうぞ

matchHeight

公式サイト←こちらからダウンロードできます。

使いかたはものすごく簡単なのに、高さが揃う優れもの。

ちなみに、高さがそろうのは横並び同士が揃っていくような形になります。

tile js

公式サイト←こちらからダウンロードできます。

こちらも似たような感じです。

matchHeightと違って、横並びではない要素も同じ高さにできます。

しかし、画像を含む時は注意が必要です。画像の読み込みと、jQueryの実行のタイミングの関係でバグってしまう時があります。

そんなときは、「$(window).load(function() ~」を追加してあげてください。

「tile js バグ」なんて調べるとたくさん解決方法がでてきます。

思ったより少ないけどまとめ

まとめはじめたはいいものの、思ったより少ないですね。。。

Webサイトを作る際には、想像よりjQueryやJavaScriptを使うことってすくないんです。ちょっとしたアニメーションの動き( ボタンや画像のホバー )だとCSSで間に合っちゃいますしね。

今回紹介したプラグインで、スライダーやポップアップ、高さ揃えはだいたい対応できると思います。

作るサイトによって使える、使えないがあると思うので是非一度デモを作って触ってみてください。知っていても触っておかないといざという時につかえませんからね、、、、

プラグイン以外で、jQuery使うとこ!っていうのはいままでの記事で書いていますし今後どんどん増えるので他の記事を読んでおまちください。

それでは今回はこの辺で、ちゃんけいでした。