アニメーションを極めるための15日目（出現時に棒が伸びるアニメーション）

こんにちは。
WEBデザイナーのシュウトウです。

STUDIOのテンプレート巡りをしていたら素敵なサイトを発見！
デモサイトとして設定を考え、マネして制作してみました。
真似しながら制作するとかなり勉強になるな～と思います。
ところどころ変更して、自分のイメージしたクライアント様が欲しいだろうなあと思うサイトに仕上がりました。

そんな今日のアニメーションは制作したデモサイトから。
スクロールすることがわかるように棒が伸びるアニメーションです。
結構見かけますし、洗練された印象を受けます。

出現時に棒が伸びるアニメーション

とても些細なアニメーションですが、目につきますよね。
画像一面に広がるホームページでは結構効果的なアニメーションだと思います。

設定

ボックスの横幅を1px、縦幅を40pxにしています。
このボックスの原点を上に設定しておくことがポイントです。
あとはスケールでY軸から伸びるように設定したら終わりです。
とっても簡単ですよね。このサイトでは別のところで２か所使いました。笑

それでは今日は出現時に棒が伸びるアニメーションでした。
ではまた明日、よろしくお願いします！