tobiasahlin.com のメニューを参考に、jQueryを使わないように変更しました。
単純なスライドではなく、サークルが大きくなるところがポイントでなかなか気持ち良いメニューだと思います。
アニメーションのライブラリはanime.jsです。
See the Pen 全画面表示メニュー by jun (@zionboogie) on CodePen.
サークルはブロック要素(ここではDIV)のborder-radiusを50%にすることで表現しています。
<div class="js-menu-animated-background"></div>
.js-menu-animated-background {
position: absolute;
width: 800px;
height: 800px;
background-color: #4a4a48;
border-radius: 50%;
pointer-events: none;
transform: scale(0, 0);
z-index: 101;
top: -400px;
left: -400px;
}
サークルの大きさの変更はanime.jsを使っています。
anime({
targets: '.js-menu-animated-background',
scale: [0.2, 3],
opacity: [0.2, 1],
easing: "easeInCubic",
duration: 300,
});
サークルを大きくして画面を覆い尽くしても良いのですが、途中まで大きくなったところで画面全体をメニューコンテンツで覆っています。
食い気味でメニューコンテンツが表示されるため、待たされた感も少なく、小気味良いアニメーションになっています。
// ナビゲーションコンテンツ
let containerDelay = 200;
anime({
targets: '#js-nav-overlay',
opacity: [0, 1],
delay: containerDelay,
easing: "easeInOutExpo",
duration: 200
});