[JS]アニメーションのタイミングが絶妙なナビゲーションのスクリプト
マウスオーバーすると、下からパネルとアイコンをアニメーションでスライド表示するナビゲーションを実装するチュートリアルをCodropsから紹介します。
A Fresh Bottom Slide Out Menu with jQuery
デモページ
ナビゲーションのインタラクションにはjQueryが使用されており、シャドウや角丸のエフェクトにはCSS3が使用されています。
パネルやアイコンの表示位置、アニメーションのタイミングは変更が可能です。
パネルとアイコンのタイミングを異なる値にするのがポイントです。
チュートリアルではHTML、CSS、JavaScriptのコードが解説付きで紹介されており、全ソースをダウンロードすることもできます。
Post on:2010年3月12日
