スタイルシートを使った文字アニメーション

スタイルシートを使った文字アニメーションを作ってみました。

Flashとかは一切使ってないです。

スタイルシートとJavaScriptを組み合わせると

こんなことも実現できてしまうのですね。

• ワイプ

var divWidth = count * 15;

text0.style.width = divWidth + "px";

• フェードイン

var n = (15 - count).toString(16);

var colorValue = "#" + n + n + n + n + n + n;

text1.style.color = colorValue;

• ズーム

var fSize = (count + 1) * 3;

text2.style.fontSize = fSize + "pt";

• ボックスイン

var top = 40 - 40 * count / 15;

var right = 120 + 120 * count / 15;

var bottom = 40 + 40 * count / 15;

var left = 120 - 120 * count / 15;

text3.style.clip = "rect(" + top + "px," + right + "px," + bottom + "px," + left + "px)";