スタイルシートを使った文字アニメーション
公開日:
:
最終更新日:2014/01/30
未分類
記事内に広告を含む場合があります。記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
スタイルシートを使った文字アニメーションを作ってみました。
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)";
関連記事
- PREV
- ドロップダウンメニューを作ってみた
- NEXT
- JavaScriptでロゴムービー