読者です 読者をやめる 読者になる 読者になる

一角獣は夜に啼く

ただの日記です。

思ってることとか考えたこととか適当に書きます。 まじめな話は 「ひだまりソケットは壊れない」 に書いています。

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

プログラミング CSS

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

f:id:nobuoka:20130804182219p:plain

↑ こんなの

デモ

実際のコード

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

使ってるもの

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

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

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

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

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

感想

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

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

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

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

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

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