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. SPOILER ALERT!

    JavaScript

    画像やテキストにボカシを入れることができるjQueryプラグイン「SPOILER ALERT!」

    画像やテキストといった部分にボカシを入れることができるjQueryプラ…

  2. simpler-sidebar

    JavaScript

    シンプルでスタイリッシュなサイドナビゲーション「simpler-sidebar」

    simpler-sidebarは、シンプルでスタイリッシュなサイドナビ…

  3. jQuery Context Menu

    JavaScript

    軽量でシンプルなコンテキストメニューを実装できる「jQuery Context Menu」

    jQuery Context Menuは、軽量でシンプルなコンテキスト…

  4. Naver

    JavaScript

    シンプルですごくいい!レスポンシブに合うナビゲーションのjQueryプラグイン「Naver」

    NaverというjQueryプラグインがすごくシンプルでよかったのでご…

  5. no-image

    JavaScript

    タブやアコーディオンを実装できるjQueryプラグイン「jpix」

    jpixはシンプルなタブやアコーディオンを実装することができるjQue…

  6. JavaScript

    とても簡単にカッコいいタグクラウドを実装することができるjQueryプラグイン「jQCloud」

    とってもカッコいいタグクラウドを実装することができるjQueryプラグ…

最近の記事

  1. シービージャパン 耐熱ボウル
  2. メンソレータム リップスティック
  3. スイデンテラス 濃厚バターチキン
  4. ドトール マンデリン
  5. 厚切りトーストツナチーズメルトとブラックコーヒー

アーカイブ

PAGE TOP