はじめに
今回はハンバーガーメニューにカーソルを乗せると川のように流れるアニメーションを作りたいと思います。
今回の記事は以下の記事をベースにしていますので、まだご覧になっていない方は先にこちらをご覧ください。
サンプル
解説
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-delay（transitionの3つ目の値）をつけてアニメーションが始まるのをずらすことで、川の流れのような動きにすることができます。
また、transitionを:hoverに設定することで、transitionの効果を一方向（ゆっくり変化し即座に戻る）にしています。transitionを親要素に設定してしまうと、カーソルが乗ったときだけではなく、カーソルが離れたときにも動いてしまいます。
図にすると以下のような感じです。
#toggle-nav {
&:checked {
div {
&::before,
&::after {
background-color: #fff;
}
}
}
}
}
フルスクリーンナビゲーションを表示させたときは、divではなく::beforeと::afterの背景色を変更します。
フルスクリーンナビゲーションを表示しているときのバッテンにカーソルを乗せると、ちょっと変わったアニメーションをして面白いです。
まとめ
transformやtransitionを使えばいろいろな動きをつけられて楽しいですね。これらに加えてanimationと@keyframesを組み合わせることで、さらに複雑な動きをさせることができます。
JWTについて
【React】React イチから学習《発展編》
【React】React イチから学習《基礎編》
強力なUIコンポーネントライブラリ「MUI（Material-UI）」について《トラブルシューティング編》
強力なUIコンポーネントライブラリ「MUI（Material-UI）」について《テーマ・スタイリング編》
強力なUIコンポーネントライブラリ「MUI（Material-UI）」について《コンポーネント編》
強力なUIコンポーネントライブラリ「MUI（Material-UI）」について《概要編》
インフラストラクチャ自動化ツール「Terraform」について《ベストプラクティスとトラブルシューティング編》
【CSS+JS】背景画像の視差効果（パララックス）を実装する方法
【CSS+JS】モーダルウィンドウを表示しその中にYouTube動画を動的に埋め込む
【Rails】アプリケーションサーバー「Unicorn」の基本情報と実装方法
【Git】マージにおけるfast-forwardとnon-fast-forwardの違い
MySQL Workbenchでリモートサーバー上のMySQLにSSH接続する方法【接続できない場合の対処法あり】
【Rails】忘れがちなルーティングの書き方を総復習
【Rails】忘れがちなGemfileの書き方を総復習
【Rails】M1チップ搭載MacでRuby on Railsの開発環境構築