Ad Network

あわせて読みたい

  • あわせて読みたい

« ianime.js でコジャレたホームページ作りにチャレンジ | Main | 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"なダミーの画像と並べてテキストを書けば良い)。思いつくまでは大変だが、実装はとても簡単というまさにコロンブスの卵的な手法だ。

TrackBack

TrackBack URL for this entry:
http://www.typepad.com/services/trackback/6a00d8341c4f9853ef00e552a43ad38834

Listed below are links to weblogs that reference AJAXでコジャレたホームページ作り、その2:

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

仕様書作成係

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

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

Post a comment

This weblog only allows comments from registered users. To comment, please Sign In.