CSS3 でふわふわナビゲーション
『超次元ゲイム ネプテューヌmk2』 の公式サイト を見てたら、ナビゲーションリンクがふわふわしてておしゃれな感じだったので、似たような動きをするものを CSS3 で実装してみた。 (元は Flash ぽい。)
↑ こんなの
デモ
使ってるもの
以下のような CSS の機能を使ってみた。
- CSS Animations : CSS Animations
- CSS Transitions : CSS Transitions
- CSS Transforms Level 1 *1 : CSS Transforms
メモ
- ふわふわ動かすのは、
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
プレフィックスが必要。
感想
- 出版社/メーカー: コンパイルハート
- 発売日: 2012/06/14
- メディア: Video Game
- クリック: 7回
- この商品を含むブログ (2件) を見る
基本的にはこういうナビゲーションリンクって鬱陶しいものだけど、ゲームとかのサイトだと結構おしゃれな感じで良いなーって思った。
CSS Animations などはベンダプレフィックスもだいぶ外れてるし、IE でも最新版だとちゃんと使えるっぽいし、実用的に使えるような段階にきてるような気がする。