[JS]矩形やラインが移動するナビゲーションのホバーエフェクトを簡単に実装できるスクリプト -HoverSlippery

リスト要素で実装したナビゲーションに矩形が移動するラーバランプエフェクト、シンプルなラインが移動するホバーエフェクトを簡単に実装できるスクリプトを紹介します。

デモのアニメーション

HoverSlippery -GitHub

HoverSlipperyのデモ

デモでは、実際の動作とコードを編集することができます。

デモのキャプチャ

デモページ

ホバーのエフェクトは上から、矩形、二重線、下線、上線の4種類。
カラーやラインの太さ、角丸、スピードなどをオプションで簡単に変更できます。

アクティブのアイテムはデフォルト時は左端で、アイテムをクリックするとそこがアクティブになり、そこに戻るようになります。

デモのアニメーション

デモページ: アクティブをHomeからFashionに変更

HoverSlipperyの使い方

Step 1: 外部ファイル

jQueryと当スクリプトを外部ファイルとして記述します。

Step 2: HTML

各アイテムはリスト要素で実装し、現在位置のアイテムに「.active」を与えます。

Step 3: CSS

ナビゲーション用にリスト要素のスタイルを定義します。

Step 4: JavaScript

jQueryのセレクタでul要素を指定し、スクリプトを実行します。