249 lines
9.9 KiB
HTML
249 lines
9.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-TW">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>SECHSKIES - 水晶男孩傳奇介紹</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
<link rel="stylesheet" href="index.css">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||
|
||
</head>
|
||
|
||
<body>
|
||
<header>
|
||
<div class="hero">
|
||
<h1>SECHSKIES<br>水晶男孩</h1>
|
||
<p>六顆永恆的水晶 • 左右命運的傳奇</p>
|
||
<a href="#story" class="btn">探索他們的故事</a>
|
||
</div>
|
||
</header>
|
||
|
||
<nav>
|
||
<a href="#background">故事背景</a>
|
||
<a href="#albums">歷年作品</a>
|
||
<a href="#current">現在故事線</a>
|
||
<a href="concert.html">演唱會紀錄</a>
|
||
</nav>
|
||
|
||
<canvas id="particles"></canvas>
|
||
|
||
<div class="container">
|
||
|
||
<section id="background">
|
||
<h2 class="section-title">故事背景</h2>
|
||
<div class="intro-text">
|
||
<p>1997 年 4 月 15 日，<span class="highlight">SECHSKIES（水晶男孩）</span>正式出道，作為韓國第一代男子團體的巔峰，他們的團名在德語中意為「六顆水晶」。
|
||
</p>
|
||
</div>
|
||
|
||
<div class="story-grid">
|
||
<div class="card">
|
||
<h3>出道與巔峰（1997-2000）</h3>
|
||
<p>1997年4月15日，水晶男孩以《學園別曲》正式出道，是韓國第一代偶像團體，與H.O.T.並稱為90年代後期兩大山脈。團名源自德語「六顆水晶」，象徵六位成員能左右命運。</p>
|
||
<p>分為「黑水晶」（殷志源、李宰鎮、金在德 — Rap與舞蹈）和「白水晶」（姜成勳、高志溶、張水院 — 主唱）。</p>
|
||
</div>
|
||
<div class="card">
|
||
<h3>解散與重逢（2000-2016）</h3>
|
||
<p>2000年5月20日正式解散，成員各自發展。2016年4月14日，時隔16年在《無限挑戰》「六六歌」特輯驚喜合體，引起巨大迴響。</p>
|
||
</div>
|
||
<div class="card">
|
||
<h3>YG時期與現在</h3>
|
||
<p>2016年5月，除高志溶外五人與YG娛樂簽約重啟活動。2019年起調整為四人組合（殷志源、李宰鎮、金在德、張水院），繼續以經典魅力感動粉絲。</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- 歷年作品表格區塊 -->
|
||
<section id="albums">
|
||
<h2 class="section-title">歷年作品 (精選)</h2>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>年份</th>
|
||
<th>專輯/作品</th>
|
||
<th>主打歌</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>1997</td>
|
||
<td>學園別曲</td>
|
||
<td>學園別曲 / 男兒之路 (Pom Saeng Pom Sa)</td>
|
||
</tr>
|
||
<tr>
|
||
<td>1998</td>
|
||
<td>Road Fighter</td>
|
||
<td>Road Fighter / Couple</td>
|
||
</tr>
|
||
<tr>
|
||
<td>1999</td>
|
||
<td>Com'Back</td>
|
||
<td>Com'Back</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2016</td>
|
||
<td>
|
||
<a href="lyrics.html">數位單曲</a>
|
||
</td>
|
||
<td>
|
||
<a href="lyrics.html">Three Words (三個詞)</a>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2017</td>
|
||
<td>ANOTHER LIGHT</td>
|
||
<td>Something Special / Smile</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2020</td>
|
||
<td>ALL FOR YOU</td>
|
||
<td>ALL FOR YOU</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
|
||
<section id="current">
|
||
<h2 class="section-title">現在的故事線</h2>
|
||
<div class="timeline">
|
||
<div class="timeline-item">
|
||
<strong>2016年：傳奇回歸</strong>
|
||
<p>透過綜藝節目《無限挑戰》的「土土歌2」特輯，成員們跨越 16 年再次重聚。隨後正式與 YG 娛樂簽約，發行《Three Words》橫掃音源榜。</p>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<strong>2019年：體制調整</strong>
|
||
<p>團體重組為四人體制（殷志源、李宰鎮、金在德、張水院），繼續展開活動。</p>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<strong>至今：個人與團體並行</strong>
|
||
<p>隊長殷志源活躍於各類綜藝節目，成員們也積極參與音樂與個人品牌活動。雖然活動節奏放緩，但水晶男孩仍是 K-POP 史上的長壽標竿。</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="story-timeline">
|
||
<!-- 1997 出道 -->
|
||
<div class="timeline-box left">
|
||
<div class="date-tag">1997 - 2000</div>
|
||
<div class="content">
|
||
<h3>傳奇的誕生：出道與巔峰</h3>
|
||
<p>1997年4月15日以《學園別曲》出道，分為黑、白水晶兩隊，與H.O.T並稱為90年代後期兩大山脈。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 2000 解散 -->
|
||
<div class="timeline-box right">
|
||
<div class="date-tag">2000 - 2016</div>
|
||
<div class="content">
|
||
<h3>遺憾的句點：宣告解散</h3>
|
||
<p>2000年5月20日正式解散，成員各自發展，水晶暫時進入休眠期。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 2016 回歸 -->
|
||
<div class="timeline-box left">
|
||
<div class="date-tag">2016年 4月</div>
|
||
<div class="content">
|
||
<h3>重逢的感動：六六歌合體</h3>
|
||
<p>透過《無限挑戰》「六六歌2」跨越16年再次重聚，引起全韓黃色氣球海再現。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 2019 至今 -->
|
||
<div class="timeline-box right">
|
||
<div class="date-tag">2019 - TODAY</div>
|
||
<div class="content">
|
||
<h3>體制調整與穩定</h3>
|
||
<p>調整為四人組合（殷志源、李宰鎮、金在德、張水院），繼續以經典魅力活躍於樂壇與綜藝。</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<footer>
|
||
<p>SECHSKIES Fanpage © 2026 - 黃色氣球永遠飄揚</p>
|
||
|
||
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
|
||
Design by <strong>Jekkinoopy Studio</strong>
|
||
</a>
|
||
</footer> <!-- 粒子效果 -->
|
||
<script>
|
||
// 根據圖片比例 (1920:1080) 調整 header 高度
|
||
const header = document.querySelector('header');
|
||
|
||
function setHeaderHeight() {
|
||
const width = window.innerWidth;
|
||
const height = width * (1080 / 1920);
|
||
header.style.height = height + 'px';
|
||
}
|
||
|
||
// 確保在 DOM 完全載入後執行
|
||
if (document.readyState === 'loading') {
|
||
document.addEventListener('DOMContentLoaded', setHeaderHeight);
|
||
} else {
|
||
setHeaderHeight();
|
||
}
|
||
|
||
window.addEventListener('resize', setHeaderHeight);
|
||
window.addEventListener('load', setHeaderHeight);
|
||
|
||
const canvas = document.getElementById('particles');
|
||
const ctx = canvas.getContext('2d');
|
||
const container = canvas.nextElementSibling;
|
||
|
||
function resizeCanvas() {
|
||
canvas.width = window.innerWidth;
|
||
canvas.height = container.offsetHeight;
|
||
}
|
||
|
||
resizeCanvas();
|
||
|
||
let particles = [];
|
||
class Particle {
|
||
constructor() {
|
||
this.x = Math.random() * canvas.width;
|
||
this.y = Math.random() * canvas.height;
|
||
this.size = Math.random() * 4 + 1;
|
||
this.speedX = Math.random() * 0.5 - 0.25;
|
||
this.speedY = Math.random() * 0.5 + 0.2;
|
||
}
|
||
update() {
|
||
this.x += this.speedX;
|
||
this.y += this.speedY;
|
||
if (this.y > canvas.height) this.y = 0;
|
||
}
|
||
draw() {
|
||
ctx.fillStyle = '#FFDD00';
|
||
ctx.globalAlpha = 0.6;
|
||
ctx.beginPath();
|
||
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
}
|
||
}
|
||
|
||
function init() {
|
||
particles = [];
|
||
for (let i = 0; i < 80; i++) {
|
||
particles.push(new Particle());
|
||
}
|
||
}
|
||
|
||
function animate() {
|
||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||
for (let p of particles) {
|
||
p.update();
|
||
p.draw();
|
||
}
|
||
requestAnimationFrame(animate);
|
||
}
|
||
|
||
window.addEventListener('resize', () => {
|
||
resizeCanvas();
|
||
init();
|
||
});
|
||
|
||
init();
|
||
animate();
|
||
</script>
|
||
</body>
|
||
|
||
</html> |