Ad Network

あわせて読みたい

  • あわせて読みたい

« ラーメン激戦区とWeb2.0サービスの共通点 | Main | AJAXでコジャレたホームページ作り、その2 »

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

 少し前にオープンソースとして公開したアニメーションライブラリianime.jsを使って、ちょっとしたアニメーション・エフェクトを持つホームページを作ろうとしているところだが、すべてのブラウザーできちんと表示しようとすると色々と細かな問題点に行きあたる。

 作成中のページへのリンク

 まず、一つ目の問題はIE6.0が持つ「同じURLを指すimgタグをinsertHTMLで複数追加するとキャッシュが働かずに何度もサーバーに取りに行ってしまうというバグ」(詳細)。このバグのために、すべてのimgタグが準備できるまでに余計に時間がかかってしまい、アニメーションが歯抜けになってしまう(ちなみに、IE7でこのバグがなおっているかどうかは未確認。上のリンクをクリックして結果を報告していただけると大変ありがたい)。もし、このバグを回避する方法をご存知の方がいらしたら、ぜひとも教えていただきたい。

 もう一つは、フォントのベースラインのアラインメント。画像とオーバーラップさせた"Life is beautiful"の文字のベースラインと7列目の画像の下のラインをきっちりと会わせたいのだが、画像も文字もposition:absoluteで置いていることもあり、インラインで並べた時のように自動的にベースラインを会わせてくれる訳ではなく、そこの解決方法が分からない。たかがベースラインと言えばそれまでなのだが、一度気になりだすとどうしても気になる性格なのだ。

 「フラッシュで作る」というのも一つの方法ではあるのだが、このくらい軽いアニメーションはJavascriptでするべきだと最近は考えているので試みているしだいである。

TrackBack

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

Listed below are links to weblogs that reference ianime.js でコジャレたホームページ作りにチャレンジ:

Comments

maito

すみません。

>insertHTML

innerHTMLなのでは??

どうしても気になってしまったので
書き込みしました。

TAK

IE7で問題なく表示されてます

kazuma1027

IE7で動きを見てみましたが、同一の画像ファイルに何回もリクエストを投げることはないものの(ローカルでプロキシを動作させて確認)、画像の読み込みが終わる前にアニメーションが始まっているのか、Firefoxと比べると歯抜けが発生しているように見えます(IE6ほどひどくはないですが)。

アシタノート

ホントに、こじゃれた感じのタイトルになっていて、驚きました。素敵だと思います。

ishikawash

手元にWindows環境がないので確認できないのですが、
innerHTMLではなく、DOM API からノードを作っても同様なのでしょうか?
例えば、こんな感じです。
 http://homepage.mac.com/radio_nights/sandbox/lifeis/lifeis-modified.html
(勝手にアップしてすみません。後日削除いたしますので。)

doi

フォントのベースラインの問題に関して:
画像の下のラインのy座標が分かっているのなら、高さyのdiv を position: static でおいて、そのあとにテキストも position: static(または position: relative で x を移動可能にする)にすれば合いそうなのですが、どうでしょう。

Post a comment

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