[JS]滑らかにスライドするナビゲーションを実装するチュートリアル

滑らかにスライドするアニメーションが軽快なナビゲーションを実装するチュートリアルをSoh Tanakaから紹介します。

デモのキャプチャ

Animated Navigation with CSS & jQuery
demo

デモでは背景の有無の2パターンで、どちらも滑らかにスライドするアニメーションが面白い効果を生み出しています。

ナビゲーションはリスト要素で実装されており、「overflow:hidden;」でマスクし、マウスのホバーでスライド表示させています。

実装のイメージ

実装のイメージ

HTML

スクリプトのベースにはjQueryが使用されており、下記のスクリプトを記述します。

JavaScript

sponsors

top of page

©2018 coliss