【CSS】カーソルを乗せると流れるようなアニメーションのハンバーガーメニューを作る

はじめに

今回はハンバーガーメニューにカーソルを乗せると川のように流れるアニメーションを作りたいと思います。

今回の記事は以下の記事をベースにしていますので、まだご覧になっていない方は先にこちらをご覧ください。

サンプル

解説

HTML

HTMLは前回から変更がないので省略します。

CSS

前回の記事から変更のある箇所について解説します。

.hamburger {
  div {
    background-color: transparent;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #000;
      transform-origin: right center;
      will-change: transform;
    }
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #000;
      transform: scaleX(0);
      transform-origin: left center;
      will-change: transform;
    }
  }
}

まず、3本線となるdiv自体の背景色を透明にします。そしてdivと同じ大きさの::before::afterをそれぞれ作り、::afterのみX方向に縮小しておきます。

図にすると以下のような感じです。図ではわかりやすいように&::afterを縮小していませんが、実際は縮小させて見えなくなっている状態と思ってください。

.hamburger {
  &:hover div {
    &::before { transform: scaleX(0); }
    &:nth-of-type(1)::before { transition: transform .5s 0s; }
    &:nth-of-type(2)::before { transition: transform .5s .1s; }
    &:nth-of-type(3)::before { transition: transform .5s .2s; }

    &::after { transform: scaleX(1); }
    &:nth-of-type(1)::after { transition: transform .5s .3s; }
    &:nth-of-type(2)::after { transition: transform .5s .4s; }
    &:nth-of-type(3)::after { transition: transform .5s .5s; }
  }
}

ハンバーガーメニューにカーソルを乗せたときのスタイルです。カーソルを乗せると::beforeはX方向に縮小し、反対に::afterは拡大します。

このとき、::before::afterそれぞれの3本線にtransition-delaytransitionの3つ目の値)をつけてアニメーションが始まるのをずらすことで、川の流れのような動きにすることができます。

また、transition:hoverに設定することで、transitionの効果を一方向(ゆっくり変化し即座に戻る)にしています。transitionを親要素に設定してしまうと、カーソルが乗ったときだけではなく、カーソルが離れたときにも動いてしまいます。

図にすると以下のような感じです。

#toggle-nav {
  &:checked {
      div {
        &::before,
        &::after {
          background-color: #fff;
        }
      }
    }
  }
}

フルスクリーンナビゲーションを表示させたときは、divではなく::before::afterの背景色を変更します。

フルスクリーンナビゲーションを表示しているときのバッテンにカーソルを乗せると、ちょっと変わったアニメーションをして面白いです。

まとめ

transformtransitionを使えばいろいろな動きをつけられて楽しいですね。これらに加えてanimation@keyframesを組み合わせることで、さらに複雑な動きをさせることができます。

関連記事

【CSS+JS】メニューアイコンの一種、ベントーメニューの実装方法(アニメーション付き)
# はじめに メニューアイコンの中ではハンバーガーメニューが有名だと思いますが、その他にもいろいろな種類があって、それぞれに名前もつけられています。 <a class="gallery" data-group="gallery" href= [...]
2021年10月18日 14:26
【CSS+JS】メインコンテンツの裏から現れるフッターの実装方法
# はじめに オシャレなサイトなどでたまに見かける「メインコンテンツの裏から現れるフッター」の実装方法について説明します。 # サンプル <iframe height="392" style="width: 100%;" scrollin [...]
2021年10月18日 13:26
【CSS+JS】背景画像の視差効果(パララックス)を実装する方法
# はじめに JavaScriptプラグインを使わずに、背景画像の視差効果(パララックス)をVanilla JS(ピュアなJavaScript)だけで実装する方法について説明します。 # サンプル まず、背景画像の視差効果(パララックス) [...]
2021年10月17日 12:08
【CSS+JS】ウィンドウ内全体にファイルをドラッグ&ドロップしてアップロード
# はじめに ユーザーが選択したファイルをアップロードする必要がある場合、ファイル選択フィールドを設置することはもちろんですが、ファイルをドラッグ&ドロップしてアップロードできるようにもなっていると使い勝手のいいサービスだと言えます。しかし、ドラ [...]
2021年6月2日 15:15
【CSS+JS】モーダルウィンドウを表示しその中にYouTube動画を動的に埋め込む
# はじめに 動画のサムネイル画像をクリックしてモーダルウィンドウを表示し、その中にYouTube動画を動的に埋め込む方法について説明します。なお、本記事ではYouTube動画を動的に埋め込むまでを範囲とし、埋め込んだ動画の再生制御などは範囲外と [...]
2021年5月20日 23:23
【CSS+JS】テキストを1文字ずつ表示するアニメーションの実装方法
# はじめに モダンなサイトでよく見かける「テキストを1文字ずつ表示するアニメーション」の実装方法を解説します。 # 実装 ## サンプル 繰り返し動作を確認したい場合は右下の「Rerun」ボタンをクリックしてください。 <i [...]
2021年5月20日 13:26
【CSS】CSSだけでMarkdownのコードにファイル名をつける
# はじめに Markdownのコードに、そのコードがどのファイルのものなのかを示すためにファイル名が書いてあるとわかりやすいです。以下はQiitaの記事でコードを書いたときの一例です。 <img data-src="https://i.i [...]
2021年4月6日 14:39
【CSS】JavaScriptを使わずにハンバーガーメニューを作る
# はじめに 当初はスペースの限られるスマートフォンなどの低解像度デバイス向けサイトにおいてスペースを有効活用するために登場したハンバーガーメニューですが、最近はPCなどの高解像度デバイス向けサイトでも使われているのをよく見かけます。 何よ [...]
2020年8月31日 7:34