健やかな成長を願う

若者の成長の過程を16枚のイラストで表現しました。成長をひとことで表す画像の外は透明色にしています。

そうすることによって他の画像と重なり合っても違和感を生じさせません。

成長過程を表示する画像はsetTimeoutにより一定間隔で描画され、七五三のお祝いメッセージはLazyLinePainterのdata-llp-delayの機能を利用して時間差表示されます。

お祝いのことばをハート型に配置するにはtranslateで位置決めしますが、当初は横一線に仮表示されたものをカット＆トライで決めていきます。

成長を体感する時間差描画は二式あり、ひとつはハート型の七五三お祝いメッセージ（27文字）です。もうひとつは成長を示す16枚の画像です。

どちらも約44秒で完了し、BGMに同期させています。

若者の成長を祝って

下右の開始ボタンをクリックしてスタートです。

 

 

 

さいごに

この作品はHTMLで記述されライブラリを除いたコードは約100行から成り立っています。

将来、我が国を背負って立つ担い手の成長を祝ってください。

合わせてHTMLプログラミングの妙味を堪能していただけたら幸甚に存じます。