<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>影山飛雄 - コート上の王様 (Parallax)</title>
<style>
/* 全体のリセットと基本設定 */
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #1a202c; /* ベースカラー（暗いネイビー） */
font-family: 'Arial', sans-serif;
}
/* アニメーションの舞台 */
.scene {
position: relative;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* 1. 背景のコート（一番奥） */
.court-bg {
position: absolute;
width: 110%;
height: 110%;
/* 明るめのネイビーグラデーション */
background: radial-gradient(circle at center, #2d3748 0%, #0f172a 100%);
z-index: 1;
}
/* コートの光るライン（遠近感をつける） */
.court-grid {
position: absolute;
bottom: -20%;
width: 150%;
height: 80%;
background-image:
linear-gradient(rgba(255, 102, 0, 0.4) 2px, transparent 2px),
linear-gradient(90deg, rgba(255, 102, 0, 0.4) 2px, transparent 2px);
background-size: 80px 80px;
/* 奥行きを出すための変形 */
transform: perspective(600px) rotateX(70deg);
transform-origin: center top;
z-index: 2;
opacity: 0.7;
}
/* 2. キャラクター画像（中間） */
.character-layer {
position: relative;
z-index: 10;
height: 85vh;
max-height: 900px;
display: flex;
justify-content: center;
align-items: flex-end;
}
.character-img {
height: 100%;
width: auto;
object-fit: contain;
/* キャラクターを浮かび上がらせる影 */
filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.9));
}
/* 3. 手前のバレーボール（一番手前） */
.ball {
position: absolute;
z-index: 20;
width: 120px;
height: 120px;
/* バレーボールのカラーリング */
background: radial-gradient(circle at 30% 30%, #ffffff 10%, #ffd700 40%, #0000cd 90%);
border-radius: 50%;
box-shadow: -15px 15px 25px rgba(0,0,0,0.7), inset 5px -5px 15px rgba(255,255,255,0.4);
bottom: 15%;
right: 20%;
}
/* 4. UI・テキスト要素 */
.ui-layer {
position: absolute;
top: 5%;
left: 5%;
z-index: 30;
pointer-events: none; /* マウスイベントを貫通させる */
}
.ui-layer h1 {
font-size: 4rem;
margin: 0;
text-transform: uppercase;
letter-spacing: 5px;
/* 烏野カラーのグラデーションテキスト */
background: linear-gradient(45deg, #ff6600, #ffcc00);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
}
.ui-layer p {
color: #ffffff;
font-size: 1.2rem;
letter-spacing: 2px;
margin-top: -5px;
text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}
</style>
</head>
<body>
<div class="scene" id="scene">
<!-- 背景レイヤー（動き：少） -->
<div class="court-bg" id="layer-bg"></div>
<div class="court-grid" id="layer-grid"></div>
<!-- UIレイヤー -->
<div class="ui-layer">
<h1>KAGEYAMA<br>TOBIO</h1>
<p>Setter #9 / Karasuno High</p>
</div>
<!-- キャラクターレイヤー（動き：中） -->
<div class="character-layer" id="layer-char">
<!-- ★ご指定のURLを直接設定しました★ -->
<img src="https://s3-ap-northeast-1.amazonaws.com/hobbystock/img/item/00000068699/pc_detail_0.jpg" alt="影山飛雄" class="character-img">
</div>
<!-- 手前のボールレイヤー（動き：大） -->
<div class="ball" id="layer-front"></div>
</div>
<script>
// パララックス（視差）効果のJavaScript
const scene = document.getElementById('scene');
const bg = document.getElementById('layer-bg');
const grid = document.getElementById('layer-grid');
const char = document.getElementById('layer-char');
const front = document.getElementById('layer-front');
// マウスが動いたときの処理
scene.addEventListener('mousemove', (e) => {
// 画面の中心座標
const centerX = window.innerWidth / 2;
const centerY = window.innerHeight / 2;
// マウスの位置と中心との差分（-1.0 から 1.0 の範囲に正規化）
const mouseX = (e.clientX - centerX) / centerX;
const mouseY = (e.clientY - centerY) / centerY;
// 各レイヤーを異なる移動量で動かすことで、奥行きを表現
bg.style.transform = `translate(${mouseX * -20}px, ${mouseY * -20}px)`;
grid.style.transform = `perspective(600px) rotateX(70deg) translate(${mouseX * -15}px, ${mouseY * -5}px)`;
char.style.transform = `translate(${mouseX * 15}px, ${mouseY * 15}px)`;
front.style.transform = `translate(${mouseX * 60}px, ${mouseY * 60}px)`;
});
// マウスが画面から外れたら元の位置に滑らかに戻す
scene.addEventListener('mouseleave', () => {
const elements = [bg, grid, char, front];
elements.forEach(el => {
el.style.transition = 'transform 0.5s ease-out';
if(el === grid) {
el.style.transform = 'perspective(600px) rotateX(70deg) translate(0px, 0px)';
} else {
el.style.transform = 'translate(0px, 0px)';
}
});
setTimeout(() => {
elements.forEach(el => el.style.transition = 'none');
}, 500);
});
</script>
</body>
</html>
とびおをみる