Animated menu concept

JavaScript

かっこいいアニメーション付きメニュー実装「Animated menu concept」

Animated menu conceptはかっこいいアニメーション付きのメニューを実装できます。CSSとJSが使われています。メニューにホバーすることでお洒落なアニメーションが実行されます。

Animated menu concept

Animated menu concept

デモでは、AGENCY、DISCOVER、TEAM、CONTACTといったメニューが並べられていて、各メニューにマウスオーバーすると、ぼやけるようなアニメーションとともに別のテキストに変化します。

例えば、AGENCYにマウスオーバーすると、文字がぼやけた後にHOMEというテキストに変化します。逆にその状態からマウスカーソルを離すと、再び文字がぼやけて元のAGENCYに戻るという仕組みです。

移ろいゆく幻想的な変化を楽しめるアニメーションでユーザーにメニューを操作させたい人には最適な機能になりそうですね。

というわけで、お洒落でかっこいいアニメーション付きのメニューを実装できる「Animated menu concept」の紹介でした。

関連記事

  1. A simple DIY responsive image slideshow
  2. Fancy Input

    JavaScript

    かっこいいエフェクトのテキスト入力を実装できる「Fancy Input」

    Fancy Inputは、かっこいいエフェクトを備えたテキスト入力を実…

  3. pagePiling.js

    JavaScript

    垂直にスライドするようなスクロールを実装できるjQueryプラグイン「pagePiling.js」

    pagePiling.jsは垂直にスライドするようなスクロール機能を実…

  4. simple-calendar

    JavaScript

    イベント設定もできるシンプルなカレンダー実装「simple-calendar」

    simple-calendarは、イベント設定も可能なシンプルなカレン…

  5. no-image

    JavaScript

    マウスの動作に連動するシャドウエフェクト実装「Jquery Shadow Plugin」

    Jquery Shadow Pluginはマウスの動作に連動するシャド…

  6. Light-Zoom

    JavaScript

    CSSを使用した画像ズームを実装できるjQueryプラグイン「Light-Zoom」

    Light-Zoomは純粋なCSSを使用した画像ズーム(拡大)機能を実…

最近の記事

  1. iPhone 11 ProとApple Watch Hermès
  2. cheero Energy Plus mini Wireless 4400mAh
  3. cheero 2 port PD Charger
  4. 台座と紅葉
  5. ニルヴァーナ バターチキンカレー

アーカイブ

PAGE TOP