Menu Droplet Animation

JavaScript

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

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

Menu Droplet Animation

デモ

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

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

Menu Droplet Animation

no-imageカードを入れ替えるような3Dアニメーションによるスライダー「stack-slider」前のページ

SVGによるドーナッツ状(円形)のチャートを実装できる「donutty」次のページno-image

関連記事

  1. Building a Vertical Timeline With CSS and a Touch of JavaScript
  2. Simple HTML Menu

    JavaScript

    モバイルにもピッタリなレスポンシブ対応のメニュー実装「Simple HTML Menu」

    Simple HTML Menuは、モバイルにもピッタリなレスポンシブ…

  3. megamenu.js

    JavaScript

    レスポンシブでスマートなメガメニューを実装できる「megamenu.js」

    megamenu.jsはjQueryを使ったレスポンシブでスマートなメ…

  4. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでreplaceWithやreplaceAllを使って要素を置き換えてみる

    jQueryでreplaceWithやreplaceAllを使えば好き…

  5. no-image

    JavaScript

    マスクエフェクトが素敵なスライダー実装「Masked Circle Slider」

    Masked Circle Sliderは、円形のマスクエフェクトが素…

  6. Zoom SlideShow

    JavaScript

    カルーセルのスライドショーとズーム機能を備えた「Zoom SlideShow」

    Zoom SlideShowは、カルーセルによるスライドショーとズーム…

最近の記事

  1. JOK-350 WH
  2. 1460 COLLAR ウォータープルーフ 8ホールブーツ
  3. スターバックス ハウスブレンド

アーカイブ

PAGE TOP