PC表示
一見svgやcanvasを使用してテキストの背景画像を変えているのかと思った。
だがソースを見ると一つ一つの画像の画像になっており、animationで透明度を調整して出し分けをしている。
※正確に言うと各エリアに背景画像として画像が指定してある
単純なアニメーションだが、各画像の出るタイミングを%で細かく設定されているので見ていて気持ちがいいしインパクトがある。
スマホ表示
SP版でも同様の動きを見せている。
また、ページ最下部にも同じ仕組みを利用した顔文字が配置されているので、ぜひそちらも見ていただきたい。