【プロンプト有】CSSとJSで作る、スクロール連動の没入型メディアヒーローUI

<div class="hero-viewport">
	<div class="background-image" id="bgImage"></div>
	<div class="text-layer">
		<div class="title-wrap">
			<span class="title-part" id="titleLeft">没入型</span>
			<span class="title-part" id="titleRight">ビジュアル体験</span>
		</div>
		<div class="info-text" id="dateText">デジタルショーケース</div>
		<div class="scroll-hint" id="scrollHint">スクロールして展開</div>
		<div class="final-content" id="finalContent">
			<p>スクロール操作に応じてメディアが拡大し、視覚的に魅力的な体験を提供するUI</p>
		</div>
	</div>
	<div class="media-container">
		<div class="media-card" id="mediaCard">
			<div class="video-overlay"></div>
			<video id="heroVideo" autoplay loop muted playsinline poster="https://kumonosu.net/wp-content/uploads/2026/04/moorpheus-beach-418742.jpg">
				<source src="https://kumonosu.net/wp-content/uploads/2026/04/344380.mp4" type="video/mp4">
			</video>
		</div>
	</div>
</div>

:root {
	--bg-color: #000;
	--text-color: #fff;
	--transition-speed: 0.1s;
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	background-color: var(--bg-color);
	color: var(--text-color);
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	overflow-x: hidden;
	height: 300vh;
}
.hero-viewport {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}
.background-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url('https://kumonosu.net/wp-content/uploads/2026/04/moorpheus-beach-418742.jpg');
	background-size: cover;
	background-position: center;
	z-index: 1;
}
.media-container {
	position: relative;
	z-index: 10;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	pointer-events: none;
}
.media-card {
	position: relative;
	width: 70vw;
	height: 40vw;
	max-width: 900px;
	max-height: 500px;
	overflow: hidden;
	border-radius: 24px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
	transform: scale(0.6);
	will-change: transform, width, height, border-radius;
}
video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.video-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
	z-index: 11;
}
.text-layer {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 20;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	pointer-events: none;
}
.title-wrap {
	display: flex;
	font-size: clamp(2rem, 8vw, 5rem);
	font-weight: 900;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
}
.title-part {
	display: inline-block;
	transition: transform var(--transition-speed) linear;
}
.info-text {
	margin-top: 20px;
	font-size: 1.2rem;
	letter-spacing: 0.2em;
	transition: transform var(--transition-speed) linear, opacity 0.3s;
}
.scroll-hint {
	position: absolute;
	bottom: 40px;
	font-size: 0.9rem;
	opacity: 0.8;
	animation: bounce 2s infinite;
}
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-10px);
	}
	60% {
		transform: translateY(-5px);
	}
}
.final-content {
	position: absolute;
	z-index: 30;
	opacity: 0;
	transform: translateY(30px);
	text-align: center;
	max-width: 600px;
	padding: 20px;
	pointer-events: none;
}
.final-content h2 {
	font-size: 2.5rem;
	margin-bottom: 20px;
}
.final-content p {
	font-size: 1.1rem;
	line-height: 1.8;
}
@media (max-width: 768px) {
	.media-card {
		width: 90vw;
		height: 60vw;
	}
	.info-text {
		font-size: 0.9rem;
	}
}