[JS]アニメーションのタイミングが絶妙なナビゲーションのスクリプト

マウスオーバーすると、下からパネルとアイコンをアニメーションでスライド表示するナビゲーションを実装するチュートリアルをCodropsから紹介します。

デモのキャプチャ

A Fresh Bottom Slide Out Menu with jQuery
デモページ

ナビゲーションのインタラクションにはjQueryが使用されており、シャドウや角丸のエフェクトにはCSS3が使用されています。

パネルやアイコンの表示位置、アニメーションのタイミングは変更が可能です。
パネルとアイコンのタイミングを異なる値にするのがポイントです。

チュートリアルではHTML、CSS、JavaScriptのコードが解説付きで紹介されており、全ソースをダウンロードすることもできます。

sponsors

top of page

©2018 coliss