3Dエンドロール ジェネレーター

<!-- 3D演出用外枠ステージ (背景黒・はみ出し防止) -->
<div class="crawl-stage">
	<!-- クロールコンテナ (透過マスク適用) -->
	<div class="crawl-container">
		<!-- スクロールする3Dテキストコンテンツ -->
		<div class="crawl-content">
			{{scroll_text}}
		</div>
	</div>
</div>

/* クロール演出の最外枠ステージスタイル */
.crawl-stage {
	position: relative;
	width: 100%;
	height: 400px;
	background-color: #000; /* 背景は完全に不透明な黒を維持 */
	overflow: hidden; /* はみ出しを完全に防ぐ */
}

/* クロールコンテナ（背景透明・マスク適用） */
.crawl-container {
	position: relative;
	width: 100%;
	height: 100%;
	
	/* 上部に行くほど文字が透過して消えていくグラデーションマスク設定 */
	-webkit-mask-image: {{fade_mask_css}};
	mask-image: {{fade_mask_css}};
}

/* スクロールする中身のスタイル定義 */
.crawl-content {
	position: absolute;
	left: -20%; /* 3D回転時に底辺側が広がってもはみ出ないよう左右に十分なマージンを確保 */
	right: -20%;
	bottom: -450px; /* 1行目が完全に画面外の下側から現れるように開始位置を深く設定 */
	text-align: center;
	font-weight: bold;
	line-height: 1.8;
	font-size: {{font_size}}px;
	color: {{color}};
	
	/* アニメーションの割り当て */
	animation: crawl-animation {{duration}}s linear infinite;
}

/* 下端から奥の上端へ3Dの傾き（perspective + rotateX）を持たせたままスクロールアップしていくキーフレーム */
@keyframes crawl-animation {
	0% {
		bottom: -450px;
		transform: perspective(400px) {{crawl_transform}} translateY(0);
		opacity: 1;
	}
	80% {
		opacity: 1;
	}
	100% {
		bottom: 500px;
		transform: perspective(400px) {{crawl_transform}} translateY(-400px) scale(0.55);
		opacity: 0;
	}
}

(() => {
	// ページの読み込み完了またはマウント時に、アニメーション時間を強制的にリセットして
	// スムーズなスクロールループを実行させるための最小限のスクリプト。
	const content = document.querySelector('.crawl-content');
	if (content) {
		// 初期化および動的なアニメーション時間適用など
		content.style.animationPlayState = 'running';
	}
})();