第3章 応用・JavaScript関連技術

全画面メニュー

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

関連記事