スクロール可能な方向をシャドウやフェードアウトで示すCSS

/*
 * @property でCSS変数をアニメーション可能にする
 * syntax: '<number>' で数値として扱い、アニメーションを有効化する
 */
@property --scFade-progress {
	syntax: '<number>';
	inherits: false;
	initial-value: -1;
}

/* フェードアウトさせるための変数アニメーション */
@keyframes scFade {
	0% {
		--scFade-progress: -1;
	}
	100% {
		--scFade-progress: 0;
	}
}

.u-scFade\:x,
.u-scFade\:y {
	--scFade-size: 2rem;
	--scFade-offset: 1px; /* borderがついていたらうっすら見えたりするので、offsetで調節可能に。 */

	/* 両端が消えていくマスクグラデーションを作成 */
	mask-image: linear-gradient(
		var(--scFade-dir),
		transparent var(--scFade-offset),
		black var(--scFade-size),
		black calc(100% - var(--scFade-size)),
		transparent calc(100% - var(--scFade-offset))
	);
}

/*
 * マスク自体は両端が消えるものになっているが、消えて欲しいのは片方だけ。
 * なので、mask-sizeを 100% + フェードサイズ にして はみ出るように配置し、スクロールに合わせて位置をずらす。
 */
.u-scFade\:x {
	--scFade-dir: to right;
	mask-size: calc(100% + var(--scFade-size)) 100%;
	mask-position: calc(var(--scFade-progress) * var(--scFade-size)) 0;
	animation: scFade linear;
	animation-timeline: scroll(self x);
}
.u-scFade\:y {
	--scFade-dir: to bottom;
	mask-size: 100% calc(100% + var(--scFade-size));
	mask-position: 0 calc(var(--scFade-progress) * var(--scFade-size));
	animation: scFade linear;
	animation-timeline: scroll(self y);
}

/*
 * @property でCSS変数をアニメーション可能にする
 * syntax: '<number>' で数値として扱い、アニメーションを有効化する
 */
@property --scShadowX {
	syntax: '<number>';
	inherits: false;
	initial-value: -1;
}
@property --scShadowY {
	syntax: '<number>';
	inherits: false;
	initial-value: -1;
}

/* Xサイズ（方向）に乗算する数値をアニメーションで逆転させる */
@keyframes scShadowX {
	from {
		--scShadowX: -1;
	}
	to {
		--scShadowX: 1;
	}
}
/* Yサイズ（方向）に乗算する数値をアニメーションで逆転させる */
@keyframes scShadowY {
	from {
		--scShadowY: -1;
	}
	to {
		--scShadowY: 1;
	}
}

/**
 * スクロール位置に連動して、スクロール可能な方向に影を表示する。
 *   inset な box-shadow は、内部コンテンツより下側に表示されるため、擬似要素で子要素より上で影を表示する。
 *   この時、普通に .u-scShadow を基準に absolute 配置するとスクロールで一緒に流れていってしまう。
 *   さらに親要素を基準にして擬似要素を配置する必要があるため、 position:static とする。
 *
 *   scroll-timelineを定義して、親のスクロールを基準にして擬似要素のシャドウを動かす。
 */
.u-scShadow\:x,
.u-scShadow\:y {
	position: static;
	/* 自由に変更してください */
	--scShadow-c: hsl(240 4% 8% / 50%); /* 影の色 */

	--scShadow-size: 2rem; /* 影のサイズ */
}

/* 擬似要素の共通スタイル */
.u-scShadow\:x::after,
.u-scShadow\:y::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;

	/* 計算値 */
	--_shadowX: calc(var(--scShadow-size) * var(--scShadowX));
	--_shadowY: calc(var(--scShadow-size) * var(--scShadowY));
	--_spread: calc(var(--scShadow-size) * -1);

	/* シャドウセット */
	box-shadow: inset var(--_shadowX) var(--_shadowY) var(--scShadow-size) var(--_spread) var(--scShadow-c);
}

/* X方向スクロール用 */
.u-scShadow\:x {
	scroll-timeline: --scShadowX-timeline x;
}
.u-scShadow\:x::after {
	/* Y方向のシャドウは不要 */
	--scShadowY: 0;

	/* --scShadowX が -1 ~ 1 の間で変化することで、X方向のシャドウの向きが変わっていく */
	animation: scShadowX linear;
	animation-timeline: --scShadowX-timeline; /* 親で定義したタイムラインを参照 */
}

/* Y方向スクロール用 */
.u-scShadow\:y {
	scroll-timeline: --scShadowY-timeline y;
}
.u-scShadow\:y::after {
	/* X方向のシャドウは不要 */
	--scShadowX: 0;

	/* --scShadowY が -1 ~ 1 の間で変化することで、Y方向のシャドウの向きが変わっていく */
	animation: scShadowY linear;
	animation-timeline: --scShadowY-timeline; /* 親で定義したタイムラインを参照 */
}