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」の紹介でした。

no-imageLightboxスタイルのギャラリーやカルーセルを実装できる「slideBox.js」前のページ

複数の画像選択に対応したjQueryファイルアップローダー「uploadHBR」次のページuploadHBR

関連記事

  1. no-image

    JavaScript

    続きを読むボタンを実装できる「ReadMorePlugin」

    ReadMorePluginは「続きを読む」、「もっと読む」、「Rea…

  2. Parazoom

    JavaScript

    クールに拡大・チルトする画像ズーム「Parazoom」

    Parazoomはクールに拡大・チルトする画像ズーム機能を実装できるj…

  3. Filterizr

    JavaScript

    ソートやシャッフルができるギャラリーを実装するjQueryプラグイン「Filterizr」

    Filterizrはソートやシャッフルができるレスポンシブに対応したギ…

  4. Jquery modal box plugin
  5. JavaScript

    スマホやタブレットでのスワイプに対応したモバイルにも最適なjQueryスライダー「Swiper」

    とてもよさそうだったのでメモしときます。スワイプで切り替えることができ…

  6. JavaScript

    要素の位置までスクロールしてスピード設定もできるjQueryプラグイン「scrollToBySpee…

    scrollToBySpeedは指定した要素の位置までスクロールしてく…

最近の記事

  1. EOS R5
  2. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ
  3. ペットボトルホルスター

アーカイブ

PAGE TOP