超現場ブログ

Technique,Design and Events

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

Twitter Facebook Google+ はてブ

CodePen   A Pen by t_shimamura-min

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

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

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

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

「実行」で

タイトルどーん!

「リセット」で

かいさーん!

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

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

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

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

まずは無料の体験レッスン・カウンセリングへ!

あなたの目的や目標をお伺いしたうえで、
現在のスキルを分析し、
あなたに最適なカリキュラムをご提案します。

体験レッスン・カウンセリングの流れ

ご質問・ご相談の方はこちら

ご質問・ご相談ですか?

どんなことでもお気軽にご相談ください。

ご質問・ご相談はこちら

Copyright © 超現場主義 All rights reserved.