<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>影山飛雄 - コート上の王様 (Setter Version)</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@700;900&family=Oswald:wght@700&display=swap');
body {
background-color: #050505;
color: #ffffff;
overflow: hidden;
font-family: 'Noto Serif JP', serif;
}
/* 画面全体のヴィネット効果（映像っぽくする） */
.vignette {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: radial-gradient(circle, transparent 40%, rgba(0,0,0,0.9) 100%);
pointer-events: none;
z-index: 10;
}
/* 画面レイアウト */
#scene-container {
position: relative;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* キャラクター画像のコンテナ */
.character-container {
position: relative;
width: 80vh; /* 画面高さに合わせて調整 */
max-width: 90vw;
height: auto;
transform: translateY(50px) scale(0.9);
opacity: 0;
filter: blur(5px);
z-index: 5;
/* シーン開始時のアニメーション */
animation: characterEnter 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) 1s forwards;
}
/* 影山飛雄の画像（プレースホルダー） */
.character-image {
width: 100%;
height: auto;
border-radius: 10px;
box-shadow: 0 0 50px rgba(255, 102, 0, 0.2);
}
@keyframes characterEnter {
0% { opacity: 0; transform: translateY(50px) scale(0.9); filter: blur(5px); }
100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0px); }
}
/* バレーボールの演出 */
.ball {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%) scale(0);
width: 100px; height: 100px;
background: linear-gradient(135deg, #FFD700 35%, #0000CD 35%, #0000CD 65%, #FFD700 65%);
border-radius: 50%;
box-shadow: inset -10px -10px 20px rgba(0,0,0,0.5), 0 0 15px rgba(255, 255, 255, 0.8);
z-index: 6; /* キャラクター画像の手前に */
opacity: 0;
display: none;
}
.ball::after {
content: '';
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.3);
animation: spin 0.2s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
/* JavaScriptで制御するアニメーションクラス */
/* ボールが手元に収まる */
.ball-catch {
display: block;
opacity: 1;
animation: ballCatchEffect 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes ballCatchEffect {
0% { transform: translate(-50%, -50%) scale(0); filter: blur(10px); }
100% { transform: translate(-50%, -50%) scale(1); filter: blur(0px); }
}
/* トスの「カッコいい」動き */
.ball-toss {
animation: ballTossEffect 1s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
@keyframes ballTossEffect {
0% { transform: translate(-50%, -50%) scale(1) translate(0, 0) rotate(0deg); opacity: 1; }
30% { transform: translate(-50%, -50%) scale(1.1) translate(-20px, 10px) rotate(30deg); } /* 一瞬ためを作る */
100% { transform: translate(-50%, -50%) scale(0.5) translate(150vw, -300px) rotate(720deg); opacity: 0; } /* 画面外へ */
}
/* 影山自身の動き */
.character-action {
animation: characterActionEffect 0.7s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
@keyframes characterActionEffect {
0% { transform: scale(1) translate(0, 0); }
30% { transform: scale(1.05) translate(-10px, 5px); }
100% { transform: scale(0.98) translate(0, 0); filter: blur(2px) saturate(0.5); }
}
/* 効果音テキスト「ドシャァッ!!」 */
.impact-text {
position: absolute;
top: 50%; left: 60%;
transform: translate(-50%, -50%) scale(0) rotate(-10deg);
font-size: 8rem;
font-weight: 900;
color: transparent;
-webkit-text-stroke: 2px #ff6600;
text-shadow: 0 0 30px rgba(255,102,0,0.8), 5px 5px 0px #ff6600;
opacity: 0;
z-index: 11;
pointer-events: none;
white-space: nowrap;
display: none;
}
.show-impact {
display: block;
animation: impact 0.7s ease-out forwards;
}
@keyframes impact {
0% { transform: translate(-50%, -50%) scale(0) rotate(-15deg); opacity: 1; filter: blur(5px); }
20% { transform: translate(-50%, -50%) scale(1.3) rotate(-5deg); opacity: 1; filter: blur(0px); }
100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 0; filter: blur(10px); }
}
/* セリフテキスト */
.quote-container {
position: absolute;
bottom: 15%;
left: 50%;
transform: translateX(-50%) translateY(20px);
text-align: center;
opacity: 0;
z-index: 12;
pointer-events: none;
}
.show-quote {
animation: quoteEnter 1s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
@keyframes quoteEnter {
0% { opacity: 0; transform: translateX(-50%) translateY(20px) scale(0.8); filter: blur(5px); }
100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); filter: blur(0px); }
}
/* 画面揺れエフェクト */
.shake-screen {
animation: shake 0.3s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes shake {
10%, 90% { transform: translate3d(-5px, 2px, 0); }
20%, 80% { transform: translate3d(5px, -2px, 0); }
30%, 50%, 70% { transform: translate3d(-10px, 4px, 0); }
40%, 60% { transform: translate3d(10px, -4px, 0); }
}
/* リプレイボタン */
.replay-button {
position: absolute;
bottom: 5%;
left: 50%;
transform: translateX(-50%);
z-index: 20;
opacity: 0;
pointer-events: none;
}
.show-replay {
animation: fadeInScale 1s ease 1s forwards;
pointer-events: auto;
}
@keyframes fadeInScale {
0% { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.9); }
100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
</style>
</head>
<body>
<div class="vignette"></div>
<div id="scene-container">
<div class="character-container" id="character-element">
<img src="https://placehold.co/400x600/000000/FF6600?text=Kageyama+Setting" alt="影山飛雄 セッター・トス" class="character-image">
</div>
<div class="ball" id="ball-element"></div>
<div class="impact-text" id="impact-element">ドシャァッ!!</div>
<div class="quote-container" id="quote-element">
<h1 class="text-4xl md:text-5xl italic text-white tracking-widest font-black" style="text-shadow: 2px 2px 10px rgba(0,0,0,0.8);">
「俺がいれば、<span class="text-orange-400">お前は最強だ</span>」
</h1>
</div>
<button onclick="location.reload()" class="replay-button px-8 py-3 border border-orange-500 text-orange-500 rounded-full hover:bg-orange-500 hover:text-black transition-all duration-300 font-sans tracking-wider" id="replay-element">
▶ REPLAY
</button>
</div>
<script>
// アニメーションを順番に実行するための関数
const playKageyamaSequence = () => {
const char = document.getElementById('character-element');
const ball = document.getElementById('ball-element');
const impact = document.getElementById('impact-element');
const quote = document.getElementById('quote-element');
const body = document.body;
const replay = document.getElementById('replay-element');
// 1. 静寂（1秒後、キャラクターが浮かび上がっている状態で開始）
// 2. キャッチ（1.5秒後）
setTimeout(() => {
ball.classList.add('ball-catch');
}, 1500);
// 3. アクション＆トス（2.0秒後）
setTimeout(() => {
// キャラクターの動きを追加
char.classList.add('character-action');
// ボールのトス（高速移動）
ball.classList.remove('ball-catch');
ball.classList.add('ball-toss');
}, 2000);
// 4. インパクト（2.15秒後、ボールが通り抜けた直後）
setTimeout(() => {
// 画面揺れ
body.classList.add('shake-screen');
// 効果音テキスト
impact.classList.add('show-impact');
// 呼吸するように少し待ってから名言
setTimeout(() => {
quote.classList.add('show-quote');
}, 500);
}, 2150);
// 5. 終了とリプレイボタン（5秒後）
setTimeout(() => {
replay.classList.add('show-replay');
}, 5000);
};
// 画面ロード時にシーケンスを開始
window.addEventListener('load', playKageyamaSequence);
</script>
</body>
</html>
てすと