CSS3 でふわふわナビゲーション

『超次元ゲイム ネプテューヌmk2』 の公式サイト を見てたら、ナビゲーションリンクがふわふわしてておしゃれな感じだったので、似たような動きをするものを CSS3 で実装してみた。 (元は Flash ぽい。)

↑ こんなの

デモ

実際のコード

JSFiddle にあるので興味があればどうぞ。

• ふわふわナビゲーション - jsFiddle

使ってるもの

以下のような CSS の機能を使ってみた。

• CSS Animations : CSS Animations
  • CSS アニメーション - Web developer guide | MDN
• CSS Transitions : CSS Transitions
  • transition - CSS | MDN
• CSS Transforms Level 1 *1 : CSS Transforms
  • transform - CSS | MDN

メモ

• ふわふわ動かすのは、animation で transform プロパティの traslate の値を時間変化させて、上下方向の移動を繰り返してる
  • animation-iteration-count プロパティでアニメーションを永遠に繰り返せる
• マウスホバー時の回転は animation で transform プロパティの rotate の値を時間変化させてる
• マウスアウト時の縦方向の移動は transition プロパティを使って transform プロパティの translate の値を時間変化させてる
  • ふわふわ動くときの縦方向の移動と、マウスアウト時の移動がぶつからないように、ふわふわ動く animation の動作開始時刻を animation-delay プロパティを使って遅らせてる

ブラウザ対応状況

以下のブラウザで試した。

• Firefox 23.0
• Internet Explorer 10
• Chrome 28.0.1500.95 m
• Opera 12.16
• Opera 16.0.1196.29

Opera 12.16 は Animation 周りで微妙にバグがあるっぽい *2 けど、それ以外では問題なく動作した。

久しぶりにここら辺のプロパティを使ってみて驚いたけど、WebKit 系のブラウザ以外はベンダプレフィックス無しで CSS Animations やら CSS Transitions やらが使えた。 WebKit 系のブラウザは -webkit プレフィックスが必要。

感想

CHセレクション 超次元ゲイム ネプテューヌmk2

基本的にはこういうナビゲーションリンクって鬱陶しいものだけど、ゲームとかのサイトだと結構おしゃれな感じで良いなーって思った。

CSS Animations などはベンダプレフィックスもだいぶ外れてるし、IE でも最新版だとちゃんと使えるっぽいし、実用的に使えるような段階にきてるような気がする。

*1:いつの間にか Level 1 とかついてる...!?

*2:マウスアウト後にふわふわのアニメーションが作動しない。