Menu Droplet Animation

JavaScript

ドロップアニメーションがお洒落なナビゲーションメニュー「Menu Droplet Animation」

Menu Droplet Animationはドロップアニメーションがお洒落なナビゲーションメニューを実装できます。スクロールするとハンバーガーメニューが水滴のように落ちる感じがおもしろいですね。エフェクトにはCSSが使われているとのこと。モバイルサイトで表示させるナビゲーションメニューにちょっとしたアクセントを付け加えたい場合に活用してみてはいかがでしょうか?

Menu Droplet Animation

デモ

デモではスマホ画面のような領域の中にハンバーガーメニューが表示されています。SCROLLと書かれている通り、下へスクロールすると、このハンバーガーメニューのアイコンが水滴のように落下する動きをします。その後、再び同じ位置にハンバーガーメニューが表示されます。

基本的にナビゲーションメニューの位置はスクロールしても固定されたままなので、いつでも好きな時にメニューにアクセスできます。ちなみに、ハンバーガーメニューをクリックすると、メニューリストがフルスクリーンで表示されます。メニューリストが表示されている時は、左上(ハンバーガーメニューが表示されている場所)にはバツ印が表示されていて、ここをクリックすると元の画面に戻ります。

Menu Droplet Animation

関連記事

  1. simpleSlideShow

    JavaScript

    カスタマイズしやすいシンプル・軽量なスライドショー「simpleSlideShow」

    simpleSlideShowは、シンプルで軽量なスライドショーを実装…

  2. HR Navigation Responsive Menu
  3. Checkify

    JavaScript

    軽量でカスタマイズ性も高いjQueryバリデーションプラグイン「Checkify」

    Checkifyは軽量でカスタマイズ性も高いバリデーション機能を実装で…

  4. Erge Drop Down Menu Control
  5. PopCircle
  6. Zooming

    JavaScript

    クールな画像ズーム機能を実装できる「Zooming」

    Zoomingはクールでかっこいい画像ズーム機能を実装することができる…

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP