transformでタイトルズームイン!

先週面白い効果で結構好きな表現を発見したので再現してみました。

クリック、リセットボタンで操作してください。

See the Pen QMjdoy by t_shimamura (@t_shimamura) on CodePen.

今回はCodePenを使用させて頂きました。

「実行」で

タイトルどーん!

「リセット」で

かいさーん!

って感じでしょうか。
シンプルで分かりやすいエフェクトでいいですね。

コードはざっくり作成したので上のCodePen内を見て頂ければと思います。
Pug、SCSS、Babelでサッと書いておりますが、
細かい機能を利用していないので単純なHTML/CSS/jQueryとしてみることができるのではないかと思います。

エフェクトのコツはtransformプロパティによるオブジェクトの調整ですね。
気になる方はお試しください。

聞かなきゃわかんない!という方はぜひ体験へお越しください!
Akrosのご案内と併せてお話ししましょう。