Menu Droplet Animation

JavaScript

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

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

Menu Droplet Animation

デモ

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

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

Menu Droplet Animation

関連記事

  1. no-image

    JavaScript

    指定したテキストをハイライトとタイピング効果で表示できる「typeLighter.js」

    typeLighter.jsは、指定したテキストをハイライトとタイピン…

  2. jsPanel

    JavaScript

    高度なセッティングができるフローティングパネルやモーダルウィンドウ実装「jsPanel」

    jsPanelは高度なセッティングができるフローティングパネル、モーダ…

  3. no-image

    JavaScript

    1日のイベントスケジュールを作成できる「Jquery Layoutday plugin」

    Jquery Layoutday pluginは、1日のイベントスケジ…

  4. jQuery Scrollify

    JavaScript

    セクションごとにスクロールしてくれる「jQuery Scrollify」

    jQuery Scrollifyはセクションごとにスクロールしてくれる…

  5. quick-select

    JavaScript

    素早く簡単に選択できるセレクトボックス「quick-select」

    quick-selectは素早く簡単に選択可能なセレクトボックスを実装…

  6. no-image

    JavaScript

    親要素の下端まで要素を固定表示できる「Scroll With Page」

    Scroll With Pageはスクロールしても特定の要素を固定表示…

最近の記事

  1. ネクスタイム
  2. フォールドオーバーポーチ
  3. 田沢湖
  4. ハクバ シリコンクロス
  5. トライポッドスリーブ

Instagram始めました

Facebookページ

PAGE TOP