ianime.js でコジャレたホームページ作りにチャレンジ
Rails Conference 2008

AJAXでコジャレたホームページ作り、その2

 わずか営業日二日という、私としては例外的に短い日本出張の後は、シアトルには帰らずポートランドに直行し、Railsカンファレンスに参加だ。

 時差ぼけの頭でObjective-Cのプログラミングは辛いので、眠気覚ましに「Javascriptでコジャレたホームページ作り」に再挑戦。

 先日のものより改良したのは以下の三つ。

1) サムネールを個別の画像として取得せずに、一つの画像として取り込んで切り刻んで表示
2) ダミーのイメージファイルを使って、テキストのアンダーラインとアニメーション領域の下部を一致させる
3) ianime.jsのベジエ・アニメーション機能を最大限に使って、よりオシャレにする。

 出張中で仮想Windowsを積んでいないMacBookしかないので、Mac版のSafari/Firefox/Operaでしかテストをしていないが、それなりに動いている。それに加えて、1)のおかげでiPhone上のSafariでもちゃんと動くようになったのがうれしい。デモは以下のリンクをクリックすると別ウィンドウで始まる。

 Logo

 ブラウザーのコンパチリビティには気をつけて書いたつもりなので、大抵のブラウザーでは動くはず。ただし、1)によりIE6のキャッシュのバグが回避できたかどうかは未確認。予想される一番の問題点は、あまりにたくさんの画像を同時に動かしているために、遅いマシンではフレームレートが極端におちてしまうこと(iPhoneだと3〜5frame/secになる)。比較的遅めなマシンでのアニメーションのスムーズさなどに関する感想をいただけるとありがたい。

 ちなみに、2)の解決方法のもとになったのは、コメント欄でいただいた「staticを使えば?」というもの(感謝、感謝)。最終的にはstaticは使わなかったのだが、absoluteでアニメーションエリアにオーバーラップさせたDIVの中で、アニメーションエリアと同じ高さの画像(ただし、visibility:hiddenなので非表示)とテキストを並べることにより、ベースラインの位置を任意にコントロールするというもの(例えば、ページの上から120pxの所にベースラインをあわせてテキストを表示したい場合、style="position:abolute;top:0px;0px"のDIVの中にstyle="visibility:hidden;width:1px;height:120px"なダミーの画像と並べてテキストを書けば良い)。思いつくまでは大変だが、実装はとても簡単というまさにコロンブスの卵的な手法だ。

Comments

whaledolphin

試してみました。
当該ページを表示して、リロードボタン押下。
7秒で表示が完了します。
一直線に写真が流れてくる時点まではとってもスムーズです。まさに”流れる”様子。
その後は言葉で上手く表現できません。
でも、とっても素敵なアニメーションです。
環境は以下(比較的、遅いマシンかと)
Dell Desktop machine 15inch display
Windows XP Professional SP2
Celeron 2.20GHz 1.00GB RAM
Firefox 3(RC)

Hascal

WindowsXP SP3 + Firefox/2.0.0.14 でバッチリでした。

Kento

ウィンドウがフルで開いてないとbeautifulが表示されないですね。

Dyun

Windows 2000/IE6.0で試してみました。
7割~9.9割ぐらいまでパネルがうまったところで
コンマ何秒か一時停止する現象がありますね。
20回ぐらいやってみましたが、だいたいは9.9割の方で
パネル枚数にして1~3枚(惜しい!)というところです。

あと、動作の具合とは関係ないのですが、文字と背景色は
黒よりも白っぽい色の方が見やすいのではないでしょうか?
言葉の意味やSatoshiさんの爽やかなイメージ(←と勝手に想像)
にも合うと思いますよ!

wa-ren

かなり遅いマシンを常用しているのでTESTしてみました。時間があったら動画で撮ったやつをUPしますね。

ThinkPad X30(2002年製!)
CPU: Mobile Pentium3 1Ghz
Graphics Chip: Intel 82830GM (X30オンボード)

で、画像流れ出してから静止まで6秒。
0.5秒経過後、写真がばーっとばらけはじめた瞬間からコマ落ちが発生し、3秒ほど0.5f/secぐらいになります。

この間は何だかよくわからん感じになりますが、最後3秒ぐらい(残った写真が穴にはめこまれていく間)はきちんと動きます。


取り急ぎ

※多分もっともロースペックなPCかもw

仕様書作成係

読ませていただきました。
大変参考になりました。
これからも、良い情報の発信をしていだければと有難く思います。。
ありがとうございました。

仕様書作成係
https://www.hotdocument.net/

Verify your Comment

Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Working...
Your comment could not be posted. Error type:
Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.

Working...

Post a comment

Your Information

(Name is required. Email address will not be displayed with the comment.)