view_mode =

1/

all_categories=

PC表示

ローディング後に飛び込んでくる大量のボーダー。その正体はMVに配置されたキャッチコピー。

SVG画像内の一つ一つのボーダーにclass付け、transformなどでアニメーションを設定、transition-delayで時差を起こしてアニメーションを完成させている。

パーツ一つ一つの細かい調整には頭が下がる思い。

スマホ表示

SP版もPC版と同じ動きを採用。

transitionやanimationはあまりデバイスに左右されることなくスムーズな動きを見せてくれるので、一つ作ればそのまま様々なデバイスで使えるのが魅力の一つ。

パーパススペシャルサイト|三井金属株式会社

https://www.mitsui-kinzoku.com/purpose/