こういうの。
HTMLページ上で実現しようとした時に、フォントとか筆順とかあってプログラムに落とすのが難しかった。すぐに思いつくのだと、
- GIFアニメーション
- 動画
だが、ファイルサイズが大きくなったり、モバイルで自動再生できなかったりする。
パラパラ漫画方式が落とし所な気がするので手順をメモしておく。
文字を書く
Photoshopをおもむろに開いて、適当なサイズの画像を作成して、好きなフォントで文字を書く。
ラスタライズする
レイヤーを右クリックしてラスタライズ。
消しゴムツールでちょっとずつ消しては保存していく
こんな感じにする。
画像をくっつける
ImageMagickでも使ってくっつける。
画像を保存したディレクトリで以下を実行。
ruby -e 'command="convert +append"; Dir.glob("*.png").reverse.each do |f| command<<" #{f}" end; system "#{command} out.png"'
out.pngという画像ができる。
HTMLに組み込む。
あとは、これを背景画像にして、backgroud-positionを変えていくだけ。