Stripe.Com Navigation

JavaScript

コンテナがアニメーションで可変するナビゲーション「Stripe.Com Navigation」

ナビゲーションメニューのコンテナがアニメーションで可変するドロップダウンナビゲーション「Stripe.Com Navigation」をご紹介します。メニューのコンテンツに合わせてコンテナのサイズがアニメーションで変化するのが特徴です。

Stripe.Com Navigation

デモ

デモでは画面上部にAbout、Pricing、Contactの3つのメニューが並んでいます。各メニューにマウスオーバーすると、オシャレなアニメーションとともにドロップダウンでリストが表示されます。

さらに、隣接するメニューへマウスオーバーすると、そのメニューのコンテンツに合わせてコンテナサイズが変化するのを確認できるかと思います。

滑らかに変化していくアニメーションがとても素敵ですね。ストレスなく快適なナビゲーション操作を実現しています。

ドロップダウンで見たいときにマウスオーバーすることで子リストを表示させることにより、サイト内のデザインもスッキリしますね。ちなみにデモページはレスポンシブにも対応しています。

というわけで、コンテナがアニメーションで可変するオシャレで便利なドロップダウンナビゲーションを実装したい人は、ぜひチェックしてみてはいかがでしょうか。

Stripe.Com Navigation

Inspiration for Letter Effects印象的なテキストエフェクトを実装する「Inspiration for Letter Effects」前のページ

画像を徐々に読み込んでくれるJSライブラリ「Progressively」次のページProgressively

最近の記事

  1. trolox(トロロックス)
  2. ホットコーヒー
  3. すぱじろうのたらことサーモンと千寿ねぎのすぱ
  4. 2022.09.14

    ボルダリング

PAGE TOP