view_mode =

1/

all_categories=

PC表示

波を打ったようなSVG画像を使用し、メインビジュアルを邪魔することなく、かつシンプルに飾り付けをしている。

アニメーションはstroke-dashoffset、stroke-width、stroke-opacityなどでSVGを操作。

コストを掛けることなくかつリッチな演出ができる例。

スマホ表示

SP版でも同様。

PC・SPで共通のanimationを使用することで、よりコーディングのコストパフォーマンスをよくしている。

武田病院グループ

https://www.takedahp.or.jp