ianime.js でコジャレたホームページ作りにチャレンジ
2008.05.27
少し前にオープンソースとして公開したアニメーションライブラリianime.jsを使って、ちょっとしたアニメーション・エフェクトを持つホームページを作ろうとしているところだが、すべてのブラウザーできちんと表示しようとすると色々と細かな問題点に行きあたる。
まず、一つ目の問題はIE6.0が持つ「同じURLを指すimgタグをinsertHTMLで複数追加するとキャッシュが働かずに何度もサーバーに取りに行ってしまうというバグ」（詳細）。このバグのために、すべてのimgタグが準備できるまでに余計に時間がかかってしまい、アニメーションが歯抜けになってしまう（ちなみに、IE7でこのバグがなおっているかどうかは未確認。上のリンクをクリックして結果を報告していただけると大変ありがたい）。もし、このバグを回避する方法をご存知の方がいらしたら、ぜひとも教えていただきたい。
もう一つは、フォントのベースラインのアラインメント。画像とオーバーラップさせた"Life is beautiful"の文字のベースラインと７列目の画像の下のラインをきっちりと会わせたいのだが、画像も文字もposition:absoluteで置いていることもあり、インラインで並べた時のように自動的にベースラインを会わせてくれる訳ではなく、そこの解決方法が分からない。たかがベースラインと言えばそれまでなのだが、一度気になりだすとどうしても気になる性格なのだ。
「フラッシュで作る」というのも一つの方法ではあるのだが、このくらい軽いアニメーションはJavascriptでするべきだと最近は考えているので試みているしだいである。
すみません。
>insertHTML
innerHTMLなのでは？？
どうしても気になってしまったので
書き込みしました。
Posted by: maito | 2008.05.27 at 18:40
IE7で問題なく表示されてます
Posted by: TAK | 2008.05.27 at 19:11
IE7で動きを見てみましたが、同一の画像ファイルに何回もリクエストを投げることはないものの（ローカルでプロキシを動作させて確認）、画像の読み込みが終わる前にアニメーションが始まっているのか、Firefoxと比べると歯抜けが発生しているように見えます（IE6ほどひどくはないですが）。
Posted by: kazuma1027 | 2008.05.28 at 02:46
ホントに、こじゃれた感じのタイトルになっていて、驚きました。素敵だと思います。
Posted by: アシタノート | 2008.05.28 at 08:32
手元にWindows環境がないので確認できないのですが、
innerHTMLではなく、DOM API からノードを作っても同様なのでしょうか？
例えば、こんな感じです。
http://homepage.mac.com/radio_nights/sandbox/lifeis/lifeis-modified.html
（勝手にアップしてすみません。後日削除いたしますので。）
Posted by: ishikawash | 2008.05.28 at 09:12
フォントのベースラインの問題に関して：
画像の下のラインのｙ座標が分かっているのなら、高さｙのdiv を position: static でおいて、そのあとにテキストも position: static（または position: relative で x を移動可能にする）にすれば合いそうなのですが、どうでしょう。
Posted by: doi | 2008.05.28 at 19:17