Menu Droplet Animation

JavaScript

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

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

Menu Droplet Animation

デモ

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

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

Menu Droplet Animation

関連記事

  1. JavaScript

    Lightbox風のjQueryプラグインColorBoxの使い方

    綺麗なイメージギャラリーを簡単に設置できるColorBoxの使い方の紹…

  2. jQuery Elastic Grid
  3. t-scroll

    JavaScript

    アニメーションとともにアイテムが一つずつ現れる「t-scroll」

    t-scrollはアニメーションとともにアイテムを一つずつ表示させるこ…

  4. jQuery Star Flashing Effect
  5. Before and After image script
  6. Frappe Charts

    JavaScript

    シンプルでモダンなSVGチャートを実装できる「Frappe Charts」

    Frappe Chartsは、シンプルでモダンなSVGチャート(グラフ…

最近の記事

  1. スタンスミス(EDIFICE/IENA別注)
  2. WI-1000XM2
  3. mill オイルヒーター
  4. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP