understandard » jQuery http://www.understandard.net Fri, 30 Jul 2010 02:24:56 +0000 ja hourly 1 http://wordpress.org/?v=3.0 タイル状にアニメーションして画像を切り替えるjQueryプラグイン jFancyTile http://www.understandard.net/javascript/javascript004.html http://www.understandard.net/javascript/javascript004.html#comments Thu, 25 Mar 2010 12:15:20 +0000 じゅん＠understandard http://www.understandard.net/javascript/javascript004.html
関連投稿
]]> 今まで見た画像切り替えプラグインの中で一番、「おぉぉ」となった jQuery プラグイン、jFancyTile。
何はともあれ、YouTube で公開されている動画を見てみてください！

FLASH と見間違えてもおかしくないです。
jQuery ってすごいなーとしみじみ。

jFancyTile: A jQuery tile shifting image viewer plugin
（デモ）

このプラグインは、ここに触発されて作ったそうです。これもすごくかっこいいです。
Making a Mosaic Slideshow With jQuery & CSS

使い方

画像表示部分の指定は以下の通り

<div id="selector">
    <ul>
        <li><img src="images/img01.jpg" alt="Title 01" /></li>
        <li><img src="images/img02.jpg" alt="Title 02" /></li>
        <!-- More images -->
    </ul>
</div>

見て分かるように、特殊なコーディングテクニックは必要ないです。必要なのは、囲む div に id を付けること。
画像の alt に入れたテキストが画像の上に表示されます。

head 内で必要なファイルを読み込み、jfancytile() の指定をします。
CSSの内容、ファイルまでのパスは適宜変更してください。

<head>
<link rel="stylesheet" type="text/css" href="css/jfancytile.css"/>
<script type="text/javascript" src="js/jquery.jfancytile.js"></script>
<script type="text/javascript">
    $("#selector").jfancytile();
</script>
</head>

デフォルトのままのセッティングでいいのであれば、ここで終了。デモ1と同じように動くはずです。

挙動のカスタマイズ

デモ2のように、プラグインの挙動をカスタマイズしたい場合、以下のものを調整してみてください（書かれているのはデフォルト値）。

$("#selector").jfancytile({
    inEasing: "swing",
    outEasing: "swing",
    inSpeed: 1000,
    outSpeed: 1000,
    rowCount: 8,
    columnCount: 13,
    maxTileShift: 3
});
inEasing
タイルから画像に変化する時のイージングアニメーション
outEasing
画像からタイルに変化する時のイージングアニメーション
inSpeed
タイルから画像に変化する時のアニメーションスピード（ミリ秒）
outSpeed
画像からタイルに変化する時のアニメーションスピード（ミリ秒）
rowCount
列の数（数が多くなるとタイルの高さが低くなる）
columnCount
段の数（数が多くなるとタイルの横幅が狭くなる）
maxTileShift
タイルが移動できる位置の最大量

イージングの動きはかなり種類があるので（違いが微妙なものもありますが）、好みのアニメーションを選びましょう。
それぞれの動きは、jQuery Easing Plugin のExample をいろいろ試して確認してみてください。

プラグインがどのように動いているか

プラグインが実際どのようにうごいているか、という内容です。
使用する上ではしらなくても大丈夫なので、興味がない場合はすっ飛ばしてください。

  1. 画像を解析して、alt の内容・サイズ・画像のソースを取得する
  2. 一番大きな画像のサイズに合わせて囲いを作る
  3. HTMLから<li>を除去する
  4. ナビゲーションボタンを作って、囲いの中に入れる
  5. rowCount と columnCount に基づいて、必要なタイルの数を計算する
  6. 各タイル用の div を作って、タイルを作る
  7. background-image に画像を適用し、background-position で正しい位置に画像をずらす。
  8. タイルの集合に title を追加する
  9. ランダム位置とフェードアウトする機能を追加する
  10. 指定した位置とフェードインする機能を追加する

という流れでこのプラグインが動いているそうです。

既知の問題

CPUに負荷がかかる。
rowCount、columnCountの値が大きすぎると、ブラウザがクラッシュする。
時々画像のプロパティが読み込めず、極端に小さいサイズになってしまう。
リロードすればちゃんと動くようになるけど、ちょっとね…。
Firefox に比べて、Chrome と Safari の挙動がちょっと違う。
画像が全部読み込まれた後であれば、Chrome/Safari の挙動が正しい挙動。

まとめ

Firefoxでは不安定、Chrome と Safai では重いですね。
動きは素晴らしいと思うだけに残念です。

また、僕の検証環境では、IE6、IE7 で動作しませんでした。
画像のおもしろい見せ方ができるプラグインですが、日本国内ではIE6、IE7 ユーザーがまだまだ多いようなので、使いどころは難しいかもしれません。

関連投稿
]]> http://www.understandard.net/javascript/javascript004.html/feed 0 キャラクターと背景が動きまくるjQueryプラグイン（おまけつき） jQuery.spritely http://www.understandard.net/javascript/javascript003.html http://www.understandard.net/javascript/javascript003.html#comments Fri, 12 Mar 2010 06:25:39 +0000 じゅん＠understandard http://www.understandard.net/?p=345
関連投稿
]]> ロンドンにあるArtlogic Media Ltd. という会社が公開しているjQueryプラグイン、jQuery.spritelyがおもしろかったので、紹介がてらポスト。
公開したのが2010年3月10日ということなので、公開ほやほやなプラグインのようです。

このプラグインを使用すると、FLASHのような動きを、iPhoneのようなFLASH非対応のデバイスでも見られるようになります。
※“クリック”と書いてある箇所はiPhoneなどのデバイスでは、“タッチ”になります。

jQuery Spritely | Spritel
※リンク先がデモも兼ねています。

ページを開くと、背景がスクロールしていて、その上に鳥が2羽飛んでいます。
003-1.jpg

これだけでも充分すごいんですが、ページのどこかをクリックすると…

003-2.jpg
マウスのある場所まで降りてくる！

背景がスクロールしているエリアから飛び出して、本文のところまで降りてきてくれます。
うっかりクリックしちゃっても降りてくるので、若干うざったいところもありますね。

下にテキストがあろうが、画像があろうが関係なく降りてきます。
邪魔なときはちょっと離れたところをクリックして、どいてもらいましょう。

そして、鳥が2羽いるのにも意味があります。
飛んでこないほうの鳥をクリックすると…なんと、飛んでくる鳥が入れ替わるんですｗ

プラグインについて

このプラグインで使用するのは、sprite() と pan() の2つだけ。簡単です。
この2つのメソッドで、要素に指定している背景画像のアニメーションが実現できます。

2つのメソッドの違いは

  • panは背景画像を左右どちらかからもう一方にスライドして、それを繰り返す
  • spriteにはフレームという概念がある

ということ。
詳しくは以下の参照。

sprite()

サンプルで使われているのは鳥の部分。
鳥の画像はこれ。
bird_180x180.png
この画像を3コマの繰り返しにするならフレームの指定は、

$('#bird').sprite({fps: 12, no_of_frames: 3});

と、こんな感じでできます。
つまり、CSS Spriteを使って、それを切り替えることでアニメーションにしているってことですね。
上のコードだと、画像を3コマに分割して（no_of_frames: 3 の部分）、1秒間に12コマのアニメーションになります。

デモページのように、クリックでマウス位置まで降りてくるようにするなら、

$('#bird').sprite({fps: 12, no_of_frames: 3}).activeOnClick().active();
$('body').flyToTap();

とすればできるようです。

active() はページを開いた時にspriteをアクティブにするメソッドで、activeOnClick()は、クリックした時にspriteをアクティブにするメソッドだそうです。
$(‘body’).flyToTap()の部分で、どこがクリックされたかを見て、spriteをクリックされた場所に移動させます。
ランダム移動のメソッドが指定されている場合、数秒後に元にいた場所に戻ります。

spriteをランダム移動するには、以下のような指定をします（speedはミリ秒で指定）。

$('#bird')
      .sprite({fps: 8, no_of_frames: 3}
      .spRandom({
          top: 70,
          left: 100,
          right: 200,
          bottom: 340,
          speed: 4000,
          pause: 3000
      });

pan()

デモページの丘の部分です。

div（サンプルでは#trees）に背景画像を指定して、その背景画像をbackground-repeat: repeat-x; と指定し、以下の指定をします。

$('#trees').pan({fps: 30, speed: 2, dir: 'left'});

スピード（1フレームあたりのピクセル数）と１秒あたりのフレーム数はそれぞれ個別に指定できます。
1秒あたりのフレーム数を高くしすぎると、パフォーマンスが低下するので（特にモバイル）、アニメーションのスムースさとパフォーマンスの適正なバランスをとりましょう。

背景画像を多層にするには、単純に画像ををお互いの下に置くか、z-indexを調整すればできます。
遠い場所にあるものをより遅く動かすと、きれいに見えるそうです。

小ネタ

ページ内をクリックすると鳥が飛んできてくれるのは上で書きましたが、ページの最下部をクリックするとちょっと変な挙動に。

最下部で鳥を呼ぶと、ページの高さがちょっとだけ増えます。
ということは、ページをもうちょっと下までスクロールできるようになります。

これを延々と繰り返すと、どんどん下までページを伸ばせる…という、どうでもいい小ネタです。

あ、でも隠しておいたテキストなりリンクなりを探させる、という使い方もあるかもしれませんね（そんなにないと思いますが）。

まとめ

対応ブラウザは以下の通り

  • Internet Explorer 6以上
  • Firefox
  • Safari
  • Chrome
  • Opera

バー ジョン番号が特に書いていないですが、おそらく最新版でテストしていると思われます。
また、モバイルでは、iPhone、iPad、iPod Touchに対応しているそうです。

モバイルでも快適に動作させるためにも、過剰な使用は避けましょうとのこと。

ライセンスは、jQuery本体と同じく、MIT もしくは GPL Version 2のデュアルライセンスということになっています。
利用者は商用・非商用を問わず無料で使用できるとのことです。

この記事を書いている時点でのバージョンは0.1と、まだまだ開発が進みそうなプラグイン。
今後どのようにパワーアップしてくれるのか楽しみです。

関連投稿
]]> http://www.understandard.net/javascript/javascript003.html/feed 3 要素の高さをそろえるjQueryプラグイン http://www.understandard.net/javascript/javascript001.html http://www.understandard.net/javascript/javascript001.html#comments Fri, 12 Dec 2008 02:08:19 +0000 じゅん＠understandard http://www.understandard.net/?p=53
関連投稿
]]> CSS Newbieというサイトで、簡単に要素の高さを揃えられるjQueryプラグインが公開されていました。

The EqualHeights jQuery Plugin
demo

jQueryとjquery.equalheights.jsを読み込み

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.equalheights.js" type="text/javascript"></script>

tr
下記のように要素の高さを揃えたい箇所を指定すれば、内要素が異なる高さを持つ要素の高さを揃えられます。

$(document).ready(function() {
    $(".columns").equalHeights(100,300);
});

上記の記述では、columnというクラス名がついた要素に対して高さを揃えます。
.equalHeights(100,300)の部分でmin-heightとmax-heightを指定できます。値としてautoも使えるみたいです（作者デモはautoを使っている）。300pxを超えたらスクロールバーが出てきます。

既知のバグとして、要素内に画像を含み、その画像にheightの指定がない場合、IEで正確に高さが計算できないことがあるそうです。その場合、スクリプトが高さをゼロとみなしてしまうようです。

また、いくつかのブラウザでリサイズ時にもう一度スクリプトを読まないといけない場合があるらしく、その場合は下記のようなスクリプトを書いてね、とのこと。

$(".columns").resize(function(){
     $(".columns").equalHeights();
});

ここまで書いておいて言うのもなんだが、こういうjQueryでやるのも楽だけど、ヨモツネットさんの記事（書籍などに紹介されていない display : inline-block について）のほうがjavascriptに依存しないし、好きだな。

jQueryをガシガシ使いたい人は使ってみてください。

関連投稿
]]> http://www.understandard.net/javascript/javascript001.html/feed 0