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 });