LavaLampとはカーソルに伴ってハイライトした光源が移動するエフェクトで、LavaLamp for jQuery lovers!にあるようなものです。
CSS3の角丸やボックスシャドウ、アニメーションを使用してこのエフェクトを実装するチュートリアルをINSIC DESIGNSから紹介します。
Creating a Fancy menu using CSS3 and jQuery
デモページ
デモはCSS3に対応したChrome、Safariで動作をします。
Chromeでのキャプチャ
ナビゲーションはリスト要素で実装されており、画像を使用していないためカラーの変更もスタイルシートで簡単に行えます。
カラーの変更はスタイルシートで
ナビゲーションのアクティブ時の処理にはjQueryが使用されています。
Post on:2010年2月16日
