結局のところ、動いたり動かなかったりのサイトを作ることになるものです。
なぜ、人は無暗にウゴウゴさせたがるのか、それは永遠のテーマです。
こんにちは、ウェブ屋です。今日は管理でなくでコーディングの話です。
最近はHTMLの発達で、画像＋CSSで結構かなり自由に画像を動かしたりできるんです。それを使って文字アニメーションをサイトに入れ込みたかったんですが、動作数が多くなるとギクシャクしたり、途中の指定が飛んだりするんですよね。それで、素直にフォントでの表現に変えたいところですが、フォントもウェブフォント対応が難しいものになると、結局ベッタリと動画やアニメーションにすることになるんです。で、今回は結構ブラウザ対応が進んできたAPNGを使おうと思います。
こんだけ書いてもピンと来ないかもしれないので例でいうと。※リアルの注文は違います
祇園精舎の鐘の声、
諸行無常の響きあり。
沙羅双樹の花の色、
盛者必衰の理をあらはす。
驕れる人も久しからず、
ただ春の夜の夢のごとし。
猛き者もつひにはほろびぬ、
ひとへに風の前の塵に同じ。
by平家物語より
これをサイト内へカッコイイ楷書で縦書きアニメーションしたいとします。
楷書あまりないんですよね、ウェブフォント。
仕方ないから、透過画像を作ってナニかで制御しよっかなと思ったわけです。
それで、８ピースに分けてCSSアニメーションのSTEPで制御したら、なぜか最後の方がスポっと飛んじゃうとか謎現象が起こったりしまして。
でも下の画像と一体化するのも格好悪いので、今回はそろそろ行けそうなAPNG対応をしてみようと思います。
サイトとして、翻訳機能があまり必要でないサイトであること、コピーライトとしても、本文の要約のようなものなのでこの方法で解決を図ることにしました。
作業としてはこんな感じです、わあ４つもソフトをハシゴしてますねえ。
・アニメーションを組んでバラでPNGの書き出し＠ダビンチレゾルブ
・モニタサイズにされてしまうので不要部分を一括切り出し＠フォトスケープX
・APNGを長さ調整しながら出力＠アニメ画像に変換する君
そのうち全行程書きますが、とりあえず作れたので備忘録です。
ダビンチレゾルブの書き出しが意外で、癖があったなあ…
参考記事がこちらのブログ記事です。
ちなみに、高圧縮は無理なので、大きめに作って小さく据えて見え方を調整しないと良いモニタだと境界がボヤっと見えました。