超現場ブログ

BLOG

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

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

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

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

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

「実行」で

タイトルどーん!

「リセット」で

かいさーん!

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

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

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

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


CONTACT

お問合せ

体験お申込み・資料請求・ご質問・
ご相談はこちらから

受付専用フリーダイヤル

フリーダイヤル 0120-941-071

受付時間:10:00〜18:00 (土日祝定休)