メニュー

CSS Transitionsを使ってhover時の演出をつけてみる

前回はポータルサイトのレスポンシブWebデザイン化について 書いてみましたが、各ゲームサイトでもいろいろ試していたりします。 今回は『リリリズム』のサイトで使用したCSS Transitionsの話です。 lili-navi

CSS Transitionsでアニメーションさせる

アニメーションといってもいろいろ手法があるかと思いますが、 今回は単純なアニメーションなので、メンテナンスしやすいCSS Transitionsを使用しています。

各ブラウザでの対応

CSS3は、特に各ブラウザで対応状況が異なります。 (私はよくCSS3 & HTML5 Browser Supportのサイトを参照しています。) 今回使うCSS Transitionsは、IE9以下ではサポートしていません。 ただレイアウトが崩たり、内容が閲覧できなくなる…といった影響があるわけではありませんので、 IE9以下の対応は特にせず実装することにしました。 (プログレッシブエンハンスメントという考えですね!)

cssサンプル

実際にアニメーションするところだけ抜粋しています。 今回はナビゲーションにマウスをのせた際に変更して欲しいので、 下記のような形で少し強引ではありますが、高さを変化させています。 transition-CSS3リファレンス

#mainnavi li a{
	height:80px;
	transition: all 0.2s ease;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
}
#mainnavi li a:hover{
	margin:5px 0 0 0;
	height:75px;
}

実装完了

今回は単純に位置を少し下にずらすだけでしたが、 CSS Transformsとあわせて使うと回転・拡大…と幅も広がります。 今回は画像での動き+CSS Transitionsで なかなかかわいらしい動きがつくれたのではないかなと思います。
実際の動作はサイトより確認してください。 peakvox リリリズム

この記事をシェアする

  • twitter
  • facebook
  • Google+
  • B!はてブ
  • pocket
トップへ戻る

CONTACT

ゲーム開発、Webサイト制作に関するご相談等ございましたら、お気軽にお問い合わせください。

ゲーム開発に関する
お問い合わせはこちら

Webサイト制作に関する
お問い合わせはこちら