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

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

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

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

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

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

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

Comments

maito

すみません。

>insertHTML

innerHTMLなのでは??

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

TAK

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

kazuma1027

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

アシタノート

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

ishikawash

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

doi

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

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.)