クライアントワークでよくお世話になっているjQueryプラグインいろいろ
私が仕事でWeb制作をする時に、よく利用させてもらっている jQueryのプラグインをまとめてみました。ライセンスは MIT、GPL のものばかりです。デザイン、レイアウト的に汎用性のあるものになっています。また、IE 特有のバグ（透過PNGの黒ずみなど）対策についても少し触れてみました。
Webサイトを作る時に、何かとお世話になっている jQuery のプラグイン。HTML と CSS だけでは表現できないことも、Javascript を使うことでいろいろできるようになりますよね！インターネットを見ていると、本当にたくさんの jQuery のプラグインが公開されています。feed を読んでいても、1日一個くらいは新しい jQuery のプラグインに出会います。どれを使ったらいいか迷うくらい … 。
今回は、そんな数ある jQuery のプラグインの中から、 私がクライアントワーク（仕事としての Web制作）で使わせていただいているものをメインに、デザインのレイアウトと一緒にご紹介します。
クライアントワークで使っているので、ライセンスは MIT、GPLのもの、基本的にクロスブラウザ（IE7以上）のものです。今回全部サンプルを作ってみましたけど、IE6では動作確認してません。IE7、IE8、IE9 ではOKです。UI（ユーザーインターフェイス）関連のものではなく、デザイン、レイアウトに関するものばかりです！
また、Webデザイナー Vanillateさんのバニデザノート ウェブデザインのいろいろの下記の記事も参考になります！
また、もしよかったら、みなさんがクライアントワークで使っている jQuery のプラグインなども教えていただけるとうれしいです！… それともあんまり使わないのかなー …。
jQuery プラグイン 目次
- 基本的な jQuery プラグインの使い方
- エフェクトが美しいイメージスライダー：Nivo Slider
- ディスプレイの幅いっぱいにコンテンツスライダー：Cycle Plugin
- ディスプレイサイズいっぱいのカルーセルスライダー BX Slider
- jQuery でパララックス（視差）を使ったデザイン
- フロートしたブロックをきれいに整列してくれる jQuery Masonry
- 動きがかわいい Lightbox 系プラグイン：Fancybox
1. 基本的な jQuery プラグインの使い方
まずは基本的な jQuery プラグインの使い方からおさらいです。そんなの知ってるよー！という人はスルーしてくださいね！
jQuery のプラグインを使うには、まず本体？である jQuery（jQuery とは、Javascriptで書かれたライブラリです） をダウンロードしておきます。jQuery のプラグインを使うなら、jQuery がないともちろん動きません …。
でも、公開されている jQuery プラグインをダウンロードすると、jQuery が同梱されていることが多いです。また、jQuery にもバージョン（2011年9月現在 Ver 1.6.4）があり、プラグインの中には、バージョンが違うと動かなくなる … というものもあるので注意も必要ですね！
1.1. jQuery を読み込む
まずは HTML の<head>内などで、jQuery を読み込みます。
HTML
<head> <script type='text/javascript' src='js/jquery.js'></script> </head>
1.2. プラグインの Js ファイルを読み込む
次にプラグインの Javascript ファイルを読み込みます。プラグインをダウンロードすると、必ずプラグインが書かれた js ファイルがあるはずです。それをさっきと同じように読み込みます。
下記の例では、example-plugin.js という Javascript ファイルを読み込んでいます！
HTML
<head> <script type='text/javascript' src='js/jquery.js'></script> /* jQuery */ <script type='text/javascript' src='js/example-plugin.js'></script> /* プラグイン */ </head>
1.3. プラグインの設定用の script を書こう！
ほとんどの jQueryプラグインの場合は、読み込んだだけでは機能しません …。今度は読み込んだプラグインを、HTML のどの部分に使用するのかを設定してあげます。下記は記述例のひとつです。
HTML
<head>
<script type='text/javascript' src='js/jquery.js'></script> /* jQuery */
<script type='text/javascript' src='js/example-plugin.js'></script> /* プラグイン */
<script type='text/javascript'>
$(document).ready(function() {
$('#container').example({
/* ここに設定を書くこともあります */
});
});
</script>
上記では、HTML に記述されている、id=”container” の要素に対して（#container）、jQuery プラグインで定義されている関数、 example()関数を実行する … という意味です。example()関数の中に、パラメータ（設定するのに必要なもの）を書く場合もあります！ちょっと CSS と書き方が似ていますねー。
また、$(document) などの $ の部分は、jQuery(document)という風に書くこともできます。
初めての人には、チンプンカンプンかもしれませんけど、これから紹介するプラグインでは具体的に書いていきますので、今は大まかな流れだけわかればOKです！
jQuery プラグインを使う為の大まかな流れ
- jQuery をダウンロードして読み込む
- プラグインをダウンロードして、Jsファイルを読み込む
- プラグイン実行用のスクリプトを書く
それでは jQuery のプラグインを、具体的にひとつずつ見ていきます！
2. エフェクトが美しいイメージスライダー：Nivo Slider
スライダーの jQuery プラグインは、本当にたくさんありますよねー。その中でも、わりとよく使わせてもらってるのが Nivo Slider。画像のエフェクトが可愛らしいので、Webサイトのメインビジュアル部分などに使っています。
Nivo Slider はコンテンツスライダーではなくて、あくまでイメージスライダー …。画像以外には使えないので注意してくださいね！
HTML
HTMLは単純で、id、またはクラスをつけたブロック内に、imgタグを並べるだけです。もちろんリンクで囲むこともできます！
<div id="slider"> <a href="#"><img src="images/image01.jpg" alt="" title="Title #1" /></a> <a href="#"><img src="images/image02.jpg" alt="" title="Title #2" /></a> <a href="#"><img src="images/image03.jpg" alt="" title="Title #3" /></a> </div>
これだけでOKです。また、img タグの title 属性を記述すると、下記のようにそのまま画像タイトルとして表示されます！
2.1. 画像のタイトルを表示
プレーンなテキストですが、もちろん CSS でスタイル変更できます。
2.2. タイトル（キャプション）にリンクなどを入れたい
タイトル（キャプション）にリンクをいれたり、見出しタグを入れたい場合などは、ちょっとひと手間必要です。まず img タグの title 属性には、参照する id を書きます … 例えば #caption1 みたいな感じです。それから #slider の外に、参照される側の id を降った div タグを書きます（divじゃなくてもOKです）。
HTML
<div id="slider">
<a href="#"><img src="images/image01.jpg" alt="" title="#caption1"/></a>
<a href="#"><img src="images/image01.jpg" alt="" title="#caption2" /></a>
<a href="#"><img src="images/image01.jpg" alt="" title="#caption3" /></a>
</div>
<div id="caption1" class="nivo-html-caption">
<h3>ここにタイトル</h3>
<p>ここにテキスト。<a href="#">リンク</a>もOKです。</p>
</div>
<div id="caption2" class="nivo-html-caption">
... 省略 ...
</div>
簡単なHTML（リンクや、h3タグなどの見出し）なら、ここに書けば画像のタイトル、キャプションとして表示できます！
キャプション部分の背景の色も、CSSで簡単に変更できます。
CSS
.nivo-caption {
background-color : #fff;
}
透過度（opacity）は js で変更できるし、そのためのパラメータも用意されています（後述）。
2.3. 色んなナビゲーション
スライダーに必要なのが「前へ」「次へ」などのナビゲーションとページャーですよね。もちろん両方表示したり、非表示にすることもできます。
ページャーをサムネイル（縮小画像）で表示したい
ページャーを数字やアイコンではなくて、サムネイルで表示したい場合もありますよね。もちろんそれにも対応しています！
サムネイルを使う場合は、元画像の img タグの rel 属性に、サムネイル画像のパスを指定します！例えば以下のように書きます。
HTML
<div id="slider"> <a href="#"><img src="images/image01.jpg" rel="images/image01_thumb.jpg" alt="" title="Title #1" /></a> <a href="#"><img src="images/image01.jpg" rel="images/image02_thumb.jpg" alt="" title="Title #1" /></a> ... 省略 ... </div>
Javascript
あとでまとめて記述しますが、パラメータ（設定に必要な引数）を以下のようにします。
<script type='text/javascript'>
$(window).load(function() {
$('#slider').nivoSlider({
controlNav : true, /* ページャーを表示 */
controlNavThumbs : true, /* ページャーにサムネイルを使用 */
controlNavThumbsFromRel : true /* rel 属性にサムネイルのパス */
)};
)};
</script>
こうすると、rel 属性のパスを参照して、ページャーをサムネイルで表示してくれます！ … でもいちいちパスを書くのもめんどくさい X(
そんな場合は、下記のように元画像とサムネイルのファイル名に規則性を持たせてあげれば、HTMLを少し簡単に書けます！
- 元画像
- image01.jpg
- image02.jpg
- サムネイル
- image01_thumb.jpg
- image02_thumb.jpg
Javascript
<script type='text/javascript'>
$(window).load(function() {
$('#slider').nivoSlider({
controlNav : true,
controlNavThumbs : true,
controlNavThumbsSearch : '.jpg',
controlNavThumbsReplace : '_thumb.jpg'
)};
)};
</script>
こうすると、元画像の .jpg を、_thumb.jpg に置き換えたファイル名がサムネイルのファイル名です！という意味になります。なので rel 属性の記述を省略できます！
2.4. CSS で画像読み込み中は非表示に！
CSSで忘れずに指定したいのが、#slider（上記の例では）の背景に、画像読み込み中に出す loading.gif を指定することと、読み込み中の画像、#slider img に display:none を指定して、非表示にしておくこと。
例えば表示する画像が10枚あった場合、読み込み時に10枚の画像が縦に並んで表示されてしまいます … なので必ず display:none を指定しておきましょう。
#slider{
background : #fff url(images/loading.gif) no-repeat 50% 50%;
}
#slider img { display:none; }
/* ページャーに画像を使っている場合 */
.nivo-controlNav a img {
display : bloack;
}
2.5. パラメータ
作成したサンプルで使っているパラメータは、以下のような感じで指定しています。
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect : 'random', /* エフェクトの種類 */
captionOpacity : 0.8, /* キャプション背景の透過度 */
animSpeed : 1000, /* エフェクトのスピード */
pauseTime : 5000, /* 間隔の時間 */
slices : 6, /* スライスエフェクトの数 */
directionNav : true, /* 前へ、次への表示 */
prevText : '<', /* 前への文字 */
nextText : '>', /* 次への文字 */
controlNav : true, /* ページャーの使用 */
controlNavThumbs : true, /* サムネイルの使用 */
controlNavThumbsSearch : '.jpg', /* 元画像の置き換える文字 */
controlNavThumbsReplace : '_thumb.jpg' /* これに置き換える */
});
});
</script>
この他にもたくさんのエフェクトや、パラメータが用意されています。詳しくは本家サイトを見てくださいね！
- Nivo Slider
チュートリアル
2.5. 初めての人用のおさらい
冒頭で、jQuery のプラグインの基本的な使い方を紹介しましたが、前述した Nivo Slider にあてはめて、復習してみましょう。おおまかな流れは、以下のような感じでした。
jQuery プラグインを使う為の大まかな流れ
- jQuery をダウンロードして読み込む
- プラグインをダウンロードして、Jsファイルを読み込む
- プラグイン実行用のスクリプトを書く
これを Nivo Slider にあてはめると、以下のようになります。
HTML
<head>
<script type='text/javascript' src='js/jquery.js'></script> /* 1. jQuery */
<script type='text/javascript' src='js/jquery.nivo.slider.pack.js'></script> /* 2. Nivo Slider */
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
/* 3. ここにいろんな設定を書く */
});
});
</script>
</head>
こんな感じです！それでは次の jQueryプラグインに進みます。
3. ディスプレイの幅いっぱいにコンテンツスライダー：Cycle Plugin
こちらはさっきの Nivo Slider と違って、画像だけでなく HTML で書いたコンテンツごとスライドできる jQuery プラグイン、Cycle Plugin。有名なプラグインなので、使っている人も多いんじゃないかと思います … 。
もちろん画像スライダーとしても使えます。WordPress のスライダー系のプラグインでも、この Cycle Plugin を利用して作られてるものも多く見られますね！
- jQuery Cycle Plugin
ダウンロード - ライセンス
Dual licensed under the MIT and GPL licenses. - サンプル動作確認済み
IE7、IE8、IE9、Firefox、Chrome、Safari
左右にスライドするのはもちろん、縦にスライドしたり、フェードしたりはもちろん、本当にいろんなエフェクトが用意されています。
でもこのプラグインを気に入ってる理由は、スライダー部分だけディスプレイサイズいっぱいに広げたデザイン、レイアウトが作れるからなんです。ディスプレイ幅いっぱいに広がった、ダイナミックなスライダー … 結構好きなんです XD
サンプルでは、画像は背景画像としています。このときの注意事項は、background-position の x 軸（水平方向の）を center にすること。サンプルではわざと background-position : left top にしています w するとどーなるかというと、大きなディスプレイで表示したときに、以下のようになってしまいます！
background-position : left でディスプレイサイズが大きい場合
と、遠い … デザインにもよりますが、ディスプレイサイズを頭にいれて画像を配置するように注意が必要です！
ちょっと横にそれましたが、jQuery のコンテンツスライダーのプラグインの多くは、基本的にスライダーの幅を決めて、overflow:hidden（はみ出した部分を隠す）して実装するプラグインが多いみたい … なので、こういうデザインでは使えないものばかりでした。
サンプルでは、エフェクトにフェードを使ってますけど、もちろんスライドもできます！スライドの動きには Easingプラグインも使えます（後述しますね！）。
HTML
HTMLも至ってシンプルで、id またはクラスを指定した div タグなどで囲むだけです。
<!-- 画像の場合 -->
<div id="slider">
<img src="images/image01.jpg" alt="" />
<img src="images/image01.jpg" alt="" />
</div>
<!-- HTMLの場合 -->
<div id="slider">
<div id="slide1"> ... </div>
<div id="slide2"> ... </div>
</div>
Javascript
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.easing.js'></script> /* 必要ならeasing */
<script type='text/javascript' src='js/jquery.cycle.js'></script>
$(document).ready(function() {
$('#slider').cycle({
fx : 'fade', /* fade, scrollLeft, scrollUp など */
speed : 1500, /* エフェクトのスピード */
timeout : 7000, /* スライドの間隔 */
easing : 'swing', /* easing */
pause : 1 /* ホバー時の一時停止 */
});
});
</script>
3.1. 前へ、次へボタンを表示する
前へ、次へボタンを付ける場合は、別途 HTML への記述が必要です。
HTML
<div id="slider">
<div id="slide1"> ... </div>
<div id="slide2"> ... </div>
</div>
<a id="prev-button">Prev</a>
<a id="next-button">Next</a>
javascript
$('#slider').cycle({
prev : '#prev-button', /* 前へボタンのid */
next : '#next-button' /* 次へボタンのid */
});
HTML で id を指定した<a>タグを、Javascript のパラメータで指定してあげます。
3.2. ページャーを表示する
ページャーをつける場合も、さっきと同じです。id や クラスを指定した、空の div タグなどを作っておきます。
<div id="slider">
<div id="slide1"> ... </div>
<div id="slide2"> ... </div>
</div>
<div id="navi"></div> /* 空のdiv */
Javascript
$('#slider').cycle({
pager: '#navi'
});
空の div タグを記述するのがイヤだなーという場合、直接 HTML に書かないで、下記のように jQuery で要素を追加することもできます。
Javascript
$('#slider').after('<div id="navi">').cycle({
pager: '#navi'
});
こうすると、<div id=”slider”> … </div> のあとに <div id=”navi”></div>が自動的に追加されます。
また、Nivo Slider のように、ページャーをサムネイルにすることもできます！
3.3 サンプルで使ったパラメータ
作成したサンプルで使ったパラメータは以下のような感じです。
Javascript
$(document).ready(function() {
$('#slider').after('<div id="navi">').cycle({
fx : 'fade',
speed : 1500,
timeout : 7000,
pager : '#navi',
pause: 1,
cleartype : true,
cleartypeNoBg : true
});
});
上記のパラメータの中の、cleartype と cleartypeNoBg というのは何でしょう …？これは IE の ClearType に関するバグ対策のためのパラメータです。… ちょっとどんなバグなのか、実際に見てみましょう！
3.4. IE の ClearType のバグ
まず ClearType とは何でしょう？ClearType は Windows でフォントにアンチエイリアスをかけてキレイに見せる仕組み … らしいです w 私も詳しくは知らないので、Wikipedia を参照してみてください。
とにかく Windows マシンにおいて、アンチエイリアスを使ってフォントをキレイに見せているのが、この ClearType らしいです。
でもこの ClearType、IE8 以下の場合で opacity（透過度）などを変更すると、効かなくなってフォントが酷いことになってしまいます！opacity の変更は、jQuery などでよく使いますよねー。フェードエフェクトとか …。
ClearType が効いていない状態状態
フォントが酷いことに … X(
MSゴシックなど、アンチエイリアスの少ない？フォントの場合は気にならないですが、メイリオなど、アンチエイリアスが効いてるフォントでは一目瞭然です … X( また、最近では Webフォントを利用する機会も増えました … これは何とかしておきたいですね X(
でも前述したパラメータ、cleartype を true にしておけば、ちゃんと ClearType が効くようにしてくれます！
3.5. IE だけ透過 PNG の部分だけ、body の背景が消えるバグ
実はまだ IE8以下のバグがあるんです。それはスライダーで、透過PNGを背景にした時に起こります。サンプルでは、body の背景にテクスチャ画像を指定してあって、スライダー内には下の透過PNGを背景に使っています。
スライダーで使っている透過PNG
透過PNGなので、スライダー自体は透けて、body に指定したテクスチャが表示されるはず … なんですが、IE ではなぜか以下のように、body の背景まで消えてしまいます …。なんでこうなるの？ X(
bodyの背景まで消えてしまう …
これを回避する為には、さっきのパラメータ、cleartypeNoBg を true にしておきます。
でも、さっきの cleartype というパラメータと同時に使用すると、フェード中のフォントの cleartype は効かない … という問題が発生するので … 厄介です … IE。
3.6. IE で透過PNGの opacity を変更すると黒くなるバグ
ドロップシャドウの部分が真っ黒に …
IE8以下で、フェードを使う時に気をつけたいのが透過PNG。IE6では透過PNGが（そのままでは）使えませんでしたけど、IE7からは普通に使えるので、使う機会も増えてきたと思います。でもこの透過PNG、フェードさせるとやっぱり不具合がでます …。
これは有名ですよね … IE7、8では、透過PNG の opacity（透明度）を変更すると、上記の画像のように透過部分が黒くなってしまいます …。これを回避するには、以下のサイトが参考になりました。IE独自のフィルターAlphaImageLoader を使って解決できます。
- Web 業界の技術屋 | VIVID Labs.
[IE7|IE8] jQueryのfadeIn/fadeOutした時にpng画像が変になる時のTips
上記のサイトでは、<img>タグで直接書いた画像の場合なので、背景に指定した画像に適応させる場合は以下のような感じでしょうか …。
Javascript
$(document).ready(function() {
if(navigator.userAgent.indexOf("MSIE") != -1) {
$('#example').each(function() {
$(this).css({
'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/example-bg.png", sizingMethod="image");'
});
});
}
});
わざわざ jQuery 使わなくても、スタイルシートに書いちゃえば OK ですね w これは w
背景画像の場合はちょっと注意が必要で、sizingMethod の関係で、要素のサイズと背景画像のサイズは同一にしておかないといけません …。IE のおかげで手間がかかってしまいます … X(
と、色々 IE に関するバグで寄り道しちゃいましたけど、jQuery Cycle Plugin にはたくさんのオプションが用意されているので、詳細は本家サイトを参照してみてください！
3.7. ちょっと寄り道 Easing Plugin
さっき Easing という言葉がでてきました。この Easing とは何でしょう？Easingとは、エフェクトの動きを加速、減速させるための関数です。
言葉で説明するより、見てもらった方が分かりやすいので、下記リンクを参照してみてくださいね！エフェクトの動きに変化をつけたい時には、とってもお役立ちです！
- jQuery日本語リファレンス
Easing/jQuery - jQuery Easing Plugin
ダウンロード
4. ディスプレイサイズいっぱいのカルーセルスライダー BX Slider
カルーセル … ちょっと聞き慣れない言葉ですけど、メリーゴーランドっていう意味があるらしいです。口で説明するより見てもらった方が分かりやすいと思うので、下の画像を見てみてください。
カルーセルスライダー
一個ずつじゃなくて、複数の画像やコンテンツを、一度にスライドさせたりできます。カルーセル系の jQueryプラグインもたくさんありますが、特に BX Slider というプラグインが気に入っています。
- BX SLIDER
ダウンロード - ライセンス
MIT - サンプル動作確認済み
IE7、IE8、IE9、Firefox、Chrome、Safari
このBX Slider、さっきの Cycle Plugin と同じように、ディスプレイサイズいっぱいに設置するレイアウトができるので、とても気に入っています。ちゃんと CSS で見せたい部分をセンタリングできるし。画像はもちろん、コンテンツスライダーとしても使えます！
HTML
マークアップも簡単で、ul li タグ、または div でも OK です。
<ul id="slider"> <li>Slide one content</li> <li>Slide two content</li> <li>Slide three content</li> <li>And so on...</li> </ul> <div id="slider"> <div>Slide one content</div> <div>Slide two content</div> <div>Slide three content</div> <div>And so on...</div> </div>
Javascript
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.easing.js'></script>
<script type='text/javascript' src='js/jquery.bxSlider.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
$('#slider').bxSlider({
auto: true, /* 自動再生 */
autoControls: false, /* スタート、ストップボタン */
pager: true, /* ページャー */
mode: 'horizontal', /* fade,vertical など */
speed: 1000, /* エフェクトのスピード */
controls: true, /* 前へ、次へボタンの表示 */
prevText: '<', /* 前へボタンのテキスト */
nextText: '>', /* 次へボタンのテキスト */
pause: 4000, /* 間隔の時間 */
easing: 'swing', /* Easing */
autoHover: true /* マウスホバーで停止 */
});
});
</script>
エフェクト自体は、縦スライド、横スライド、フェードの3種類しかありませんが、動き自体は Easing プラグインが使えます！
サンプルでは作ってませんけど、ページャーをサムネイルにすることもできます。
- BX Slider：Thumbnails as pager – method 1
4.1. 一度に複数見せて、カルーセル的に使う
BX Slider のいいところは、カルーセルスライダーというところ。さっきのサンプルでは、ひとつずつコンテンツをスライドさせていましたけど、一度に複数表示させることができるのは前述した通りです。
Javascript
<script type="text/javascript">
$(document).ready(function() {
$('#slider').bxSlider({
auto: true, /* 自動スタート */
autoControls: false, /* スタート、ストップボタン */
controls: false, /* 前へ、次へ 表示 */
pager: true, /* ページャーの表示 */
mode: 'horizontal', /* エフェクト */
speed: 1000, /* エフェクトのスピード */
autoHover: true, /* マウスホバー時の一時停止 */
pause: 4000, /* 間隔の時間 */
easing: 'swing', /* Easing */
displaySlideQty: 3, /* 一度に表示する数 */
moveSlideQty: 2 /* スライドする数 */
});
});
</script>
- displaySlideQty: 3
一度に何個見せるか（例では3つ） - moveSlideQty: 2
一度に何個ずらすか（例では2つ）
BX Slider では、ふたつサンプルを作ってみましたけど、他にもいろんなデモが用意されています！また、たくさんのオプションも用意されているので、いろいろ試してみてください！
5. jQuery でパララックス（視差）を使ったデザイン
パララックスとは視差という意味。スクロールしていくと、各要素のスクロールスピードが違うため、ずれて流れていきます。これを利用して、手前と奥 … という感じで、ちょっと変わった表現ができますね。口では説明しずらいので、以下のサイトを見てもらうと、どんな感じなのかがよく分かると思います。
5.1. jQuery で背景画像をずらす
パララックスを実装できるプラグインも、探せばいろいろありました。いくつか実際に使ってみたんですけど、レイアウト的に汎用性がなかったりしたので、jQuery を使って、スクロールに応じて背景画像を動かすことで実装してみました。以下のサイトが参考になります！
- webOpixel
jQueryで奥行きのある背景スクロールを作ってみる
Javascript
$(document).ready(function() {
$(window).scroll(function(){
var y = jQuery(this).scrollTop();
$('#example1').css('background-position', '100% ' + parseInt( y / 3 + 80 ) + 'px');
$('#example2').css('background-position', '0% ' + parseInt( -y / 1.5 + 640 ) + 'px');
$('#example3').css('background-position', '50% ' + parseInt( -y / 2 + 550 ) + 'px');
});
});
スクロールはずれてるけど、パララックスなデザインになってないじゃん！っていうツッコミはなしでお願いします X(
やってることは、jQuery を使って、背景画像のポジションをスクロールに合わせて変化させてるだけです。
Example
$('#example1').css('background-position', '100% ' + parseInt( y / 3 + 80 ) + 'px');
上記の例は id=”example” の要素に対して、以下のような感じで背景のポジションを指定しています！
- 100%（CSS right と同じ）の部分
水平方向（x 軸）のポジションです。ちなみに 100% の後ろに半角スペースを入れないと、IE で動きません X( 50%で center、0%で leftですよね！ - y / 3 の部分
縦方向 y 軸の位置（上か下か）と、スピード？です。-y とすると、上に向かって動きます。/ 3 の部分は、スクロールしたポジションに対して、1/3 という意味なので、1/1 でスクロールバーと同じスピード … という感じになります。 - + 80 の部分
この部分はオフセットする px 数です。ちょっと口では説明しづらいので、以下の画像を見てください。
背景画像のオフセット
上記の場合は、ボックスの top から、80px だけ下げて配置しているので、jQuery の方でも、その分オフセットしてあげる … という意味です！
5.2. ボックスは縦に長く作る
背景画像をずらすことで、要素が動いているように見せているので、ボックス自体はスクロールさせる分だけ縦に長く作っておく必要があります。短いとスクロースした時に背景画像が途中で切れてしまいます！
コードをいじれば、横方向へも動きます。いろいろ試してみるとおもしろいですね！
サンプルでは背景画像を動かしていて、<div>などの要素自体を動かしてる訳ではないところに注意が必要ですねー。そうしたい場合は、要素を position : absolute で配置して、position を jQuery で変更するって感じでいけるかもですね … まだ試してませんが …。
パララックスについて、こういうやり方がいいよー！などありましたら、教えていただければうれしいです！
6. フロートしたブロックをきれいに整列してくれる jQuery masonry
クライアントワークではまだ使ったことがないんですけど、個人的なブログで使ってみたのが、この Masonry レイアウト。Masonry とはレンガという意味だそうです。どんなレイアウトかと言うと、積み重ねたレンガみたいに、隙間なくボックスを敷きつめた感じです。
普通、CSSで要素をフロートさせると、前の要素の出っ張りにひっかかって、以下のようになってしまいます。
フロートでレイアウトした場合
本当は左端に配置したくても、各要素の高さがバラバラだと出っ張った部分にひっかかってしまいますよね！でも jQuery Masonry を使うと、位置を計算して、ちゃんと左端にくるようにレイアウトしなおしてくれます。フロートじゃなくて、position : absolute、絶対配置で配置しなおしてくれるんですねー。
- jQuery Masonry
ダウンロード - ライセンス
MIT - サンプル動作確認済み
IE7、IE8、IE9、Firefox、Chrome、Safari
使い方はとっても簡単。配置しなおしたい要素を含んでいる親要素に masonry() を実行するだけです。
HTML
<div id="wrapper"> <div> ... 省略 ... </div> <div> ... 省略 ... </div> <div> ... 省略 ... </div> </div>
Javascript
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.masonry.min.js"></script>
<script type='text/javascript'>
$(document).ready(function () {
$('#wrapper').masonry();
});
</script>
パラメータで要素間の余白を指定したり、いろんなパラメータが用意されていますが、CSS でちゃんとレイアウトしてあれば、そんなにいろいろ設定する必要もないかもです。
サンプルでは固定幅のレイアウトで作ってしまいましたけど、フレキシブルなレイアウト（リキッドレイアウト）では、ブラウザのサイズに合わせて配置しなおしたり、その際にアニメーションを加えたりと、いろいろできるみたいですね（まだ作ったことがないので …）！
- jQuery Masonry：Animating with jQuery
ブラウザサイズを変更してみてくださいね！
7. 動きがかわいい Lightbox 系プラグイン：Fancybox
最後に画像などをポップアップで表示する、Lightbox系でお気に入りのプラグイン Fancybox です。
- Fancybox
ダウンロード - ライセンス
Dual licensed under the MIT and GPL licenses. - サンプル動作確認済み
IE7、IE8、IE9、Firefox、Chrome、Safari
Fancybox のいいところは、ポップアップ時のエフェクトや、背景となるレイヤーの色を簡単に変更できるところ。また、画像だけでなく、iframe や簡単な HTML もポップアップできるところです（他にも同じことができるプラグインはあるのかも知れませんが …）。
マークアップは下記の通り。サムネイル（縮小画像）の img タグを、元画像への<a>タグで囲み、aタグに任意のクラスを指定してあげるだけです。もし画像のタイトルも表示してあげたい場合は、<a>タグの title属性に記述します。
画像のタイトル
HTML
<a class="fancybox" href="images/01.jpg" title="title 1"><img src="images/01_thumb.jpg" alt="" /></a>
Javascript
<script type="text/javascript">
$(document).ready(function() {
$("a.fancybox").fancybox({
titleShow : true,
titlePosition : over
});
});
</script>
7.1. 画像をグループ化して、次へ、前へボタンを表示する
一枚ずつ画像をクリックしてもらうのも面倒だなーという場合は、複数の画像をグループ化してギャラリーみたいな感じにすることもできます。<a>タグの rel 属性に任意の名前を入れてあげると、同じ名前の画像だけグループ化してくれます。
HTML
下記の例では、group1 という名前でグループ化しています
<a class="fancybox" href="images/01.jpg" rel="groupe1"><img src="images/01_thumb.jpg" alt="" /></a> <a class="fancybox" href="images/02.jpg" rel="groupe1"><img src="images/02_thumb.jpg" alt="" /></a>
7.2. ポップアップ時のアニメーションを変えたりオーバーレイの色を変える
ポップアップ時のエフェクトは、ファードでそのままポップアップさせるか、飛び出してくるようなエフェクトから選べます。また、ポップアップ時に回りを暗くするオーバーレイも、色や透過度も簡単に変えられます！
Javascript
<script type='text/javascript'>
$(document).ready(function() {
$("a.fancybox").fancybox({
'overlayShow' : true, /* オーバーレイを表示 */
'overlayColor' : '#000', /* オーバーレイの色 */
'overlayOpacity' : 0.7 /* オーバーレイの透過度 */
});
</script>
また、飛び出すようなエフェクト、transitionIn（開くとき）transitionOut（閉じるとき）を指定すると、その動きも easing プラグインで指定できます！
Javascript
<script type='text/javascript'>
$(document).ready(function() {
$("a.fancybox").fancybox({
'transitionIn' : 'elastic', /* 開くときのエフェクト */
'transitionOut' : 'elastic', /* 閉じるときのエフェクト */
'easingIn' : 'easeOutBack', /* 開くときのEasing */
'easingOut' : 'easeInBack', /* 閉じるときのEasing */
});
</script>
7. 3. マウスホイールで画像の切り替えも！
次の画像に移動するとき、Prev、Next ボタンをクリックするのが一般的ですよね！でも、同梱されてる Mouse wheel programming in JavaScript を読み込むだけで、マウスホイールで画像画像の切り替えができちゃいます。
HTML
Mouse wheel programming in JavaScript を読み込むだけ！
<script type="text/javascript" src="js/jquery.mousewheel-3.0.4.pack.js"></script>
7.4. iframeだって簡単にポップアップ！
Fancybox は、画像だけじゃなくて iframe をポップアップすることもできます！サンプルでも実装しているので、どんな風になるか見てみてくださいねー！
HTML
<a class="fancybox-iframe" href="http://webdesignrecipes.com/">Webデザインレシピ</a>
Javascript
<script type='text/javascript'>
$(document).ready(function() {
$("a.fancybox-iframe").fancybox({
'width' : '80%',
'height' : '80%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
</script>
ポップアップのサイズを指定して、type を iframe とするだけです！
7.5. 非表示にしてある HTML をポップアップ
display : none で非表示にしてある HTML をポップアップで表示させることもできます。フォームを表示することもできるので、ログインフォームをポップアップで表示させる … なんてこともできちゃいます。言葉だと難しいので、サンプルの一番最後の部分を見てみてくださいね。
HTML
<a>タグのhref属性に、表示する部分の id を指定します。
<a class="fancybox" href="#display" title="What is fancybox">jQueryプラグイン :: Fancyboxについて</a>
<div style="display:none">
<div id="#display" style="width:400px;height:300px;overflow:auto;">
<h2>What is Fancybox</h2>
<p>
テキストはもちろん、リンクなども表示できます。
</p>
</div>
</div>
画像だけじゃなくて色んなものをポップアップできるし、動きもかわいいので fancybox 、お気に入りです！他にもたくさんのオプション、API があるので、本家サイトを参照してみてください！
最後に
私は Javascript があんまり得意じゃありません …。なので便利な jQuery のプラグインはとてもよく使わせていただいてます。Webデザイナーの方皆さんが、こんな風に jQuery のプラグインを多用している訳じゃなくて、よく私が使っているという記事でした！
また、これらの jQueryプラグインは、基本的にパソコン用の Webブラウザでのお話。スマートフォン対応、レスポンシブ対応などは考えていない場合のレイアウトです。これからは、その辺りも含めて jQueryプラグイン探しをしなくちゃなーとも思います … X(
Webデザイナーのみなさん、ぜひおすすめの jQueryプラグインなどがあったら、教えていただけるとうれしいです！