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

2020年8月31日 9:20

はじめに

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

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

サンプル

解説

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】CSSだけでMarkdownのコードにファイル名をつける
# はじめに Markdownのコードに、そのコードがどのファイルのものなのかを示すためにファイル名が書いてあるとわかりやすいです。以下はQiitaの記事でコードを書いたときの一例です。 <img data-src="https://i.i [...]
2021年4月6日 14:39
【CSS】JavaScriptを使わずにハンバーガーメニューを作る
# はじめに 当初はスペースの限られるスマートフォンなどの低解像度デバイス向けサイトにおいてスペースを有効活用するために登場したハンバーガーメニューですが、最近はPCなどの高解像度デバイス向けサイトでも使われているのをよく見かけます。 何よ [...]
2020年8月31日 7:34
【CSS】CSSカスタムプロパティとJavaScriptを使ってモード切替(配色変更)を実装
# はじめに 便利なCSSカスタムプロパティ。実はJavaScriptから取得/設定ができます。今回はCSSカスタムプロパティとJavaScriptを使ってモード切替(配色変更)を実装する方法を解説します。 # CSSカスタムプロパティ [...]
2020年8月30日 18:07
【CSS】transitionの効果を一方向(ゆっくり変化し即座に戻る)にする
# はじめに 最近は`transition`を使った動きのあるWebサイトがたくさんあります。まったく動きのない静的なページを見つけるのが難しいくらいです。 今回は、`transition`の効果を一方向(ゆっくり変化し即座に戻る)にする方 [...]
2020年8月27日 14:51
【CSS】テキストを領域内に入った部分から徐々に表示
# はじめに 現在、お仕事でWebアプリを作っています。これを機会にイチからWebデザインの勉強をしようと思い、脱・Bootstrapを目指して頑張っています。 まだまだ高度なコードは書けませんが、これから少しずつCSS関連の記事も書いてい [...]
2020年8月25日 18:15