JS でモーションタイポグラフィー

JSTweener の機能追加と同時に、もちょっとサンプルになんか作ってみようかな、ということでモーションタイポグラフィーで遊んでみました。思ったよりは重くなかった感じです。半透明にすると重くなるかな、と思いきやどのブラウザでも割と普通に。
でも JS だと一文字一文字の横幅を正確に求めることができず(IEでできるのかな)、破壊的な動きなら出来るんですけど、あらかじめレンダリングされるであろう場所に文字を吸着とかかなり難しそうな感。

JSTweener もアップデートしたよ

http://coderepos.org/share/wiki/JSTweener

  • suffix/prefix オプションを追加

id:os0x:20070928:1190984177 で xhtml なスタイルにはきちんと px 指定しないとダメらしい、ということで suffix/prefix オプションを追加してみました。

JSTweener.addTween(el.style, {
  fontSize: 100pt,
  width: 500px,
  suffix: {
    fontSize: 'pt',
    width: 'px'
  }
});

のように記述できます。

  • JSTweener.Utils

ベジェ関数とスタイル付与関数とかが入ってます。