クライアントワークでよくお世話になっているjQueryプラグインいろいろ

Posted under - Web Design

97

私が仕事で Web制作をする時に、よく利用させてもらっている jQuery のプラグインをまとめてみました。ライセンスは MIT、GPL のものばかりです。デザイン、レイアウト的に汎用性のあるものになっています。また、IE 特有のバグ(透過PNGの黒ずみなど)対策についても少し触れてみました。

jQuery Plugins

Webサイトを作る時に、何かとお世話になっている jQuery のプラグインHTMLCSS だけでは表現できないことも、Javascript を使うことでいろいろできるようになりますよね!インターネットを見ていると、本当にたくさんの jQuery のプラグインが公開されています。feed を読んでいても、1日一個くらいは新しい jQuery のプラグインに出会います。どれを使ったらいいか迷うくらい … 。

今回は、そんな数ある jQuery のプラグインの中から、 私がクライアントワーク(仕事としての Web制作)で使わせていただいているものをメインに、デザインのレイアウトと一緒にご紹介します。

クライアントワークで使っているので、ライセンスは MITGPLのもの、基本的にクロスブラウザ(IE7以上)のものです。今回全部サンプルを作ってみましたけど、IE6 では動作確認してません。IE7、IE8、IE9 では OK です。UI(ユーザーインターフェイス)関連のものではなく、デザイン、レイアウトに関するものばかりです!

MEMO

ライセンスについては、Web Design KOJIKA17さんの記事がわかりやすいです!

また、もしよかったら、みなさんがクライアントワークで使っている jQuery のプラグインなども教えていただけるとうれしいです!… それともあんまり使わないのかなー …。

jQuery プラグイン 目次

  1. 基本的な jQuery プラグインの使い方
  2. エフェクトが美しいイメージスライダー:Nivo Slider
  3. ディスプレイの幅いっぱいにコンテンツスライダー:Cycle Plugin
    1. IE の ClearType のバグ
    2. IE だけ透過 PNG の部分だけ、body の背景が消えるバグ
    3. IE で透過PNGの opacity を変更すると黒くなるバグ
  1. ディスプレイサイズいっぱいのカルーセルスライダー BX Slider
  2. jQuery でパララックス(視差)を使ったデザイン
  3. フロートしたブロックをきれいに整列してくれる jQuery Masonry
  4. 動きがかわいい Lightbox 系プラグイン:Fancybox

1. 基本的な jQuery プラグインの使い方

まずは基本的な jQuery プラグインの使い方からおさらいです。そんなの知ってるよー!という人はスルーしてくださいね!

DOWNLOAD

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 プラグインを使う為の大まかな流れ
  1. jQuery をダウンロードして読み込む
  2. プラグインをダウンロードして、Jsファイルを読み込む
  3. プラグイン実行用のスクリプトを書く

それでは jQuery のプラグインを、具体的にひとつずつ見ていきます!

2. エフェクトが美しいイメージスライダー:Nivo Slider

Nivo Slider

スライダーの jQuery プラグインは、本当にたくさんありますよねー。その中でも、わりとよく使わせてもらってるのが Nivo Slider。画像のエフェクトが可愛らしいので、Webサイトのメインビジュアル部分などに使っています。

Nivo Slider は、コンテンツスライダーではなくて、あくまでイメージスライダー …。画像以外には使えないので注意してくださいね!

DOWNLOAD

Nivo Slider

  • ライセンス

    MIT


サンプル動作確認済み
IE7、IE8、IE9、Firefox、Chrome、Safari

Nivo Slider Sample

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. タイトル(キャプション)にリンクなどを入れたい

簡単なHTMLも記述できます

タイトル(キャプション)にリンクをいれたり、見出しタグを入れたい場合などは、ちょっとひと手間必要です。まず 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. 色んなナビゲーション

いろいろなコントロール

スライダーに必要なのが「前へ」「次へ」などのナビゲーションとページャーですよね。もちろん両方表示したり、非表示にすることもできます。

1. ページャーをサムネイル(縮小画像)で表示したい

サムネイルでページャー

ページャーを数字やアイコンではなくて、サムネイルで表示したい場合もありますよね。もちろんそれにも対応しています!

サムネイルを使う場合は、元画像の 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 を少し簡単に書けます!

  • 元画像
    1. image01.jpg
    2. image02.jpg
  • サムネイル
    1. image01_thumb.jpg
    2. 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 imgdisplay:none を指定して、非表示にしておくこと。

例えば表示する画像が 10枚あった場合、読み込み時に 10枚の画像が縦に並んで表示されてしまいます … なので必ず display:none を指定しておきましょう。

CSS
#slider{
     background : #fff url(images/loading.gif) no-repeat 50% 50%;
}
#slider img { display:none; }

/* ページャーに画像を使っている場合 */
.nivo-controlNav a img {
     display : bloack;
}

2.5. パラメータ

作成したサンプルで使っているパラメータは、以下のような感じで指定しています。

Javascript
<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 Sample

2.5. 初めての人用のおさらい

冒頭で、jQuery のプラグインの基本的な使い方を紹介しましたが、前述した Nivo Slider にあてはめて、復習してみましょう。おおまかな流れは、以下のような感じでした。

jQuery プラグインを使う為の大まかな流れ
  1. jQuery をダウンロードして読み込む
  2. プラグインをダウンロードして、Jsファイルを読み込む
  3. プラグイン実行用のスクリプトを書く

これを 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

Cycle Plugin

ディスプレイサイズいっぱいに広がったスライダー – SAMPLE

こちらはさっきの Nivo Slider と違って、画像だけでなく HTML で書いたコンテンツごとスライドできる jQuery プラグイン – Cycle Plugin。有名なプラグインなので、使っている人も多いんじゃないかと思います … 。

もちろん画像スライダーとしても使えます。WordPress のスライダー系のプラグインでも、この Cycle Plugin を利用して作られてるものも多く見られますね!


サンプル動作確認済み
IE7、IE8、IE9、Firefox、Chrome、Safari

jQuery Cycle Plugin

左右にスライドするのはもちろん、縦にスライドしたり、フェードしたりはもちろん、本当にいろんなエフェクトが用意されています。

でもこのプラグインを気に入ってる理由は、スライダー部分だけディスプレイサイズいっぱいに広げたデザイン、レイアウトが作れるからなんです。ディスプレイ幅いっぱいに広がった、ダイナミックなスライダー … 結構好きなんです 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>
<script type="text/javascript">
$(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 タグなどを作っておきます。

HTML
<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
  });
});

上記のパラメータの中の、cleartypecleartypeNoBg というのは何でしょう …?これは IE の ClearType に関するバグ対策のためのパラメータです。… ちょっとどんなバグなのか、実際に見てみましょう!

3.4. IE の ClearType のバグ

まず ClearType とは何でしょう?ClearType は Windows でフォントにアンチエイリアスをかけてキレイに見せる仕組み … らしいです。私も詳しくは知らないので、Wikipedia を参照してみてください。

とにかく Windows マシンにおいて、アンチエイリアスを使ってフォントをキレイに見せているのが、この ClearType らしいです。

でもこの ClearType、IE8 以下の場合で opacity(透過度)などを変更すると、効かなくなってフォントが酷いことになってしまいます!opacity の変更は、jQuery などでよく使いますよねー。フェードエフェクトとか …。

ClearType が効いていない状態

ClearType が効いていない状態

フォントがギザギザで酷いことに … X(

MS ゴシックなど、アンチエイリアスの少ない?フォントの場合は気にならないですが、メイリオなど、アンチエイリアスが効いてるフォントでは一目瞭然です … X( また、最近では Webフォントを利用する機会も増えました … これは何とかしておきたいですね X(

でも前述したパラメータ – cleartypetrue にしておけば、ちゃんと ClearType が効くようにしてくれます!

3.5. IE だけ透過 PNG の部分だけ、body の背景が消えるバグ

実はまだ IE8 以下のバグがあるんです。それはスライダーで、透過 PNG を背景にした時に起こります。サンプルでは、body の背景にテクスチャ画像を指定してあって、スライダー内には下の透過PNGを背景に使っています。

スライダーで使っている透過PNG

透過PNG

透過PNGなので、スライダー自体は透けて、body に指定したテクスチャが表示されるはず … なんですが、IE ではなぜか以下のように、body の背景まで消えてしまいます …。なんでこうなるの? X(

body の背景まで消えてしまう …

body の背景まで消えてしまう

body の背景のテクスチャが、なぜか消えてしまう …。

これを回避する為には、さっきのパラメータ、cleartypeNoBg を true にしておきます。

でも、さっきの cleartype というパラメータと同時に使用すると、フェード中のフォントの cleartype は効かない … という問題が発生するので … 厄介です … IE。

3.6. IE で透過PNGの opacity を変更すると黒くなるバグ

シャドウが真っ黒 ...

ドロップシャドウの部分が真っ黒に …

IE8 以下で、フェードを使う時に気をつけたいのが透過 PNG。IE6 では透過 PNG が(そのままでは)使えませんでしたけど、IE7 からは普通に使えるので、使う機会も増えてきたと思います。でもこの透過 PNG、フェードさせるとやっぱり不具合がでます …。

これは有名ですよね … IE7、8では、透過 PNG の opacity(透明度)を変更すると、上記の画像のように透過部分が黒くなってしまいます …。これを回避するには、以下のサイトが参考になりました。IE 独自のフィルターAlphaImageLoader を使って解決できます。

上記のサイトでは、<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");'
      });
    });
  }
});

Attention

追記:2012年 2月 6日 – わざわざ jQuery 使わなくても、スタイルシートに書いちゃえば OK ですね w これは w

背景画像の場合はちょっと注意が必要で、sizingMethod の関係で、要素のサイズと背景画像のサイズは同一にしておかないといけません …。IE のおかげで手間がかかってしまいます … X(

と、色々 IE に関するバグで寄り道しちゃいましたけど、jQuery Cycle Plugin にはたくさんのオプションが用意されているので、詳細は本家サイトを参照してみてください!

3.7. ちょっと寄り道 Easing Plugin

さっき Easing という言葉がでてきました。この Easing とは何でしょう?Easingとは、エフェクトの動きを加速、減速させるための関数です。

言葉で説明するより、見てもらった方が分かりやすいので、こちらのリンクを参照してみてくださいね!エフェクトの動きに変化をつけたい時には、とってもお役立ちです!

4. ディスプレイサイズいっぱいのカルーセルスライダー BX Slider

BX-SLIDER

カルーセル … ちょっと聞き慣れない言葉ですけど、メリーゴーランドっていう意味があるらしいです。口で説明するより見てもらった方が分かりやすいと思うので、下の画像を見てみてください。

カルーセルスライダー

カルーセルスライダー

一個ずつじゃなくて、複数の画像やコンテンツを、一度にスライドさせたりできます。カルーセル系の jQueryプラグインもたくさんありますが、特に BX Slider というプラグインが気に入っています。

DOWNLOAD

BX SLIDER


サンプル動作確認済み
IE7、IE8、IE9、Firefox、Chrome、Safari

BX SLIDER SAMPLE

この 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: '&lt;', /* 前へボタンのテキスト */
    nextText: '&gt;', /* 次へボタンのテキスト */
    pause: 4000, /* 間隔の時間 */
    easing: 'swing', /* Easing */
    autoHover: true /* マウスホバーで停止 */
  });
});
</script>

エフェクト自体は、縦スライド、横スライド、フェードの3種類しかありませんが、動き自体は Easing プラグインが使えます!

サンプルでは作ってませんけど、ページャーをサムネイルにすることもできます。

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 Carousel Slider Sample


BX Slider では、ふたつサンプルを作ってみましたけど、他にもいろんなデモが用意されています!また、たくさんのオプションも用意されているので、いろいろ試してみてください!

5. jQuery でパララックス(視差)を使ったデザイン

Parallax

パララックス(視差)を利用したデザイン – Parallax Sample

パララックスとは視差という意味。スクロールしていくと、各要素のスクロールスピードが違うため、ずれて流れていきます。これを利用して、手前と奥 … という感じで、ちょっと変わった表現ができますね。口では説明しずらいので、以下のサイトを見てもらうと、いろんなパララックスデザインのサイトがまとまってるので、参考にしてみてください。

5.1. jQuery で背景画像をずらす

パララックスを実装できるプラグインも、探せばいろいろありました。いくつか実際に使ってみたんですけど、レイアウト的に汎用性がなかったりしたので、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');
  });
});

jQuery parallax Sample

スクロールはずれてるけど、パララックスなデザインになってないじゃん!っていうツッコミはなしでお願いします X( やってることは、jQuery を使って、背景画像のポジションをスクロールに合わせて変化させてるだけです。

Example
  • 1. $('#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 レイアウト。Masonry とはレンガという意味だそうです。どんなレイアウトかと言うと、積み重ねたレンガみたいに、隙間なくボックスを敷きつめた感じです。

普通、CSS で要素をフロートさせると、前の要素の出っ張りにひっかかって、以下のようになってしまいます。

フロートでレイアウトした場合

フロートだと隙間ができる ...

各要素の高さがバラバラだと、こんな風に隙間ができてしまいます!でも jQuery Masonry を使うと、位置を計算して、ちゃんと左端にくるようにレイアウトしなおしてくれます。フロートじゃなくて、position : absolute絶対配置で配置しなおしてくれるんですねー。

DOWNLOAD

jQuery Masonry


サンプル動作確認済み
IE7、IE8、IE9、Firefox、Chrome、Safari

Masonry Sample

使い方はとっても簡単。配置しなおしたい要素を含んでいる親要素に 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 でちゃんとレイアウトしてあれば、そんなにいろいろ設定する必要もないかもです。

サンプルでは固定幅のレイアウトで作ってしまいましたけど、フレキシブルなレイアウト(リキッドレイアウト)では、ブラウザのサイズに合わせて再配置しなおしたり、その際にアニメーションを加えたりと、いろいろできるみたいですね!

ブラウザサイズを変更してみてくださいね!

7. 動きがかわいい Lightbox 系プラグイン:Fancybox

サムネイル画像

画像をクリックしてみてくださいね!PHOTP – heroesque

最後に画像などをポップアップで表示する、Lightbox系でお気に入りのプラグイン Fancybox です。


DOWNLOAD

Fancybox


サンプル動作確認済み
IE7、IE8、IE9、Firefox、Chrome、Safari

Fancybox Sample

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だって簡単にポップアップ!

iframeでWebサイトを表示

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>

ポップアップのサイズを指定して、typeiframe とするだけです!

7.5. 非表示にしてある HTML をポップアップ

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 があるので、本家サイトを参照してみてください!

8.最後に

私は Javascript があんまり得意じゃありません …。なので便利な jQuery のプラグインはとてもよく使わせていただいてます。Webデザイナーの方皆さんが、こんな風に jQuery のプラグインを多用している訳じゃなくて、よく私が使っているという記事でした!

また、これらの jQueryプラグインは、基本的にパソコン用の Webブラウザでのお話。スマートフォン対応、レスポンシブ対応などは考えていない場合のレイアウトです。これからは、その辺りも含めて jQueryプラグイン探しをしなくちゃなーとも思います … X(

Webデザイナーのみなさん、ぜひおすすめの jQueryプラグインなどがあったら、教えていただけるとうれしいです!

Comments

Thank you for the comment.