608 lines
26 KiB
HTML
608 lines
26 KiB
HTML
<!DOCTYPE html><html lang="zh-CN"><head>
|
||
<meta charset="UTF-8"/>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
<title>千军万马保永昌 - 温州抗倭史诗</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
|
||
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&family=Noto+Sans+SC:wght@300;400;500&display=swap" rel="stylesheet"/>
|
||
<style>
|
||
body {
|
||
font-family: 'Noto Sans SC', sans-serif;
|
||
background: linear-gradient(135deg, #FFF8DC 0%, #F5F5DC 100%);
|
||
overflow-x: hidden;
|
||
}
|
||
.hero-title {
|
||
font-family: 'Noto Serif SC', serif;
|
||
background: linear-gradient(45deg, #8B4513, #CD7F32);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
.lyrics-text {
|
||
font-family: 'Noto Serif SC', serif;
|
||
color: #8B4513;
|
||
line-height: 2;
|
||
}
|
||
.bg-canvas {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: -1;
|
||
}
|
||
.content-overlay {
|
||
position: relative;
|
||
z-index: 10;
|
||
}
|
||
.nav-item {
|
||
transition: all 0.3s ease;
|
||
}
|
||
.nav-item:hover {
|
||
transform: translateY(-2px);
|
||
color: #DC143C;
|
||
}
|
||
.card-hover {
|
||
transition: all 0.3s ease;
|
||
}
|
||
.card-hover:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 20px 40px rgba(139, 69, 19, 0.2);
|
||
}
|
||
.pulse-animation {
|
||
animation: pulse 2s infinite;
|
||
}
|
||
@keyframes pulse {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.7; }
|
||
}
|
||
.fade-in {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
}
|
||
.hero-image {
|
||
background-image: url('https://pjoss.x-php.com/20251210/f551cd20d2f0c2036c42d22b00711b05.png');
|
||
background-size: cover;
|
||
background-position: center;
|
||
background-attachment: fixed;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- 背景动画画布 -->
|
||
<div id="bg-canvas" class="bg-canvas"></div>
|
||
|
||
<!-- 导航栏 -->
|
||
<nav class="fixed top-0 w-full bg-white/90 backdrop-blur-sm z-50 shadow-sm">
|
||
<div class="max-w-7xl mx-auto px-6 py-4">
|
||
<div class="flex justify-between items-center">
|
||
<div class="hero-title text-2xl font-bold">千军万马保永昌</div>
|
||
<div class="flex space-x-8">
|
||
<a href="#home" class="nav-item cursor-pointer">首页</a>
|
||
<a href="#lyrics" class="nav-item cursor-pointer">歌词</a>
|
||
<a href="#history" class="nav-item cursor-pointer">历史</a>
|
||
<a href="#music" class="nav-item cursor-pointer">音乐</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 主要内容 -->
|
||
<div class="content-overlay">
|
||
<!-- 英雄区域 -->
|
||
<section id="home" class="hero-image min-h-screen flex items-center justify-center relative">
|
||
<div class="absolute inset-0 bg-black/30"></div>
|
||
<div class="relative z-10 text-center text-white px-6">
|
||
<h1 class="text-6xl md:text-8xl font-bold mb-6 fade-in" style="font-family: 'Noto Serif SC', serif;">千军万马保永昌</h1>
|
||
<p class="text-xl md:text-2xl mb-8 fade-in">温州抗倭史诗 · 非遗鼓词传承</p>
|
||
<div class="flex flex-col md:flex-row gap-4 justify-center fade-in">
|
||
<button onclick="playMusic()" class="bg-red-600 hover:bg-red-700 text-white px-8 py-3 rounded-full text-lg font-medium transition-all duration-300 transform hover:scale-105">
|
||
播放音乐
|
||
</button>
|
||
<button onclick="scrollToSection('lyrics')" class="bg-transparent border-2 border-white text-white hover:bg-white hover:text-gray-800 px-8 py-3 rounded-full text-lg font-medium transition-all duration-300">
|
||
查看古词
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 歌词展示区域 -->
|
||
<section id="lyrics" class="py-20 px-6">
|
||
<div class="max-w-4xl mx-auto">
|
||
<h2 class="text-4xl font-bold text-center mb-16 hero-title fade-in">古词欣赏</h2>
|
||
|
||
<!-- 歌词卡片 -->
|
||
<div class="bg-white/80 backdrop-blur-sm rounded-2xl p-8 shadow-lg card-hover fade-in mb-8">
|
||
<div class="text-center mb-8">
|
||
<h3 class="text-2xl font-bold lyrics-text mb-4">【开篇】</h3>
|
||
<p class="lyrics-text text-lg">公元一五五八年，倭寇越来越嚣张。</p>
|
||
<p class="lyrics-text text-lg">烧杀抢掠恶做尽，沿海百姓遭祸殃。</p>
|
||
</div>
|
||
|
||
<div class="text-center mb-8">
|
||
<h3 class="text-2xl font-bold lyrics-text mb-4">【第一幕】</h3>
|
||
<p class="lyrics-text text-lg">王沛王德俩叔侄，满腔热血保家乡。</p>
|
||
<p class="lyrics-text text-lg">身中数矛热血涌，赤胆忠魂震东洋。</p>
|
||
</div>
|
||
|
||
<div class="text-center mb-8">
|
||
<h3 class="text-2xl font-bold lyrics-text mb-4">【第二幕】</h3>
|
||
<p class="lyrics-text text-lg">叔果叔杲意志强，筹款要建护城墙。</p>
|
||
<p class="lyrics-text text-lg">王氏遗孀倾囊助，为保家园添力量。</p>
|
||
</div>
|
||
|
||
<div class="text-center mb-8">
|
||
<h3 class="text-2xl font-bold lyrics-text mb-4">【第三幕】</h3>
|
||
<p class="lyrics-text text-lg">城堡坚固厚城墙，倭寇围困日久长。</p>
|
||
<p class="lyrics-text text-lg">砻糠替谷河面运，砻糠之计退敌强。</p>
|
||
</div>
|
||
|
||
<div class="text-center mb-8">
|
||
<h3 class="text-2xl font-bold lyrics-text mb-4">【第四幕】</h3>
|
||
<p class="lyrics-text text-lg">遗孀乘机率众出，突袭敌营上战场。</p>
|
||
<p class="lyrics-text text-lg">战鼓声声号角响，杀的倭寇魂魄消。</p>
|
||
</div>
|
||
|
||
<div class="text-center mb-8">
|
||
<h3 class="text-2xl font-bold lyrics-text mb-4">【结尾】</h3>
|
||
<p class="lyrics-text text-lg">一段鼓词情难尽，古人壮举永传扬。</p>
|
||
<p class="lyrics-text text-lg">家国安宁民康泰，温州处处保永昌。</p>
|
||
</div>
|
||
|
||
<div class="text-center">
|
||
<p class="lyrics-text text-sm">作者：陈继宁（温州市鼓词研究会会长）</p>
|
||
<p class="lyrics-text text-sm">2025-12-01</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 音乐控制 -->
|
||
<div class="text-center">
|
||
<div class="bg-white/60 backdrop-blur-sm rounded-full px-8 py-4 inline-flex items-center space-x-6 shadow-lg">
|
||
<button id="playBtn" onclick="togglePlay()" class="w-12 h-12 bg-red-600 hover:bg-red-700 text-white rounded-full flex items-center justify-center transition-all duration-300">
|
||
▶
|
||
</button>
|
||
<div class="flex items-center space-x-2">
|
||
<span class="text-sm text-gray-600">00:00</span>
|
||
<div class="w-64 h-2 bg-gray-300 rounded-full">
|
||
<div id="progressBar" class="h-full bg-red-600 rounded-full" style="width: 0%"></div>
|
||
</div>
|
||
<span class="text-sm text-gray-600">04:32</span>
|
||
</div>
|
||
<button onclick="toggleMute()" class="w-10 h-10 bg-gray-200 hover:bg-gray-300 rounded-full flex items-center justify-center transition-all duration-300">
|
||
🔊
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 历史背景区域 -->
|
||
<section id="history" class="py-20 px-6 bg-gradient-to-b from-transparent to-white/50">
|
||
<div class="max-w-6xl mx-auto">
|
||
<h2 class="text-4xl font-bold text-center mb-16 hero-title fade-in">历史背景</h2>
|
||
|
||
<div class="grid md:grid-cols-2 gap-12 items-center mb-16">
|
||
<div class="fade-in">
|
||
<img src="https://pjoss.x-php.com/20251210/de589ced94b90b32165b55673479aa52.png" alt="温州古城" class="w-full rounded-2xl shadow-lg"/>
|
||
</div>
|
||
<div class="fade-in">
|
||
<h3 class="text-2xl font-bold lyrics-text mb-6">温州抗倭历史</h3>
|
||
<p class="text-gray-700 leading-relaxed mb-4">
|
||
明朝洪武二年（1369年），倭寇首次进犯温州地区，从此开启了温州人民长达数百年的抗倭斗争。
|
||
温州地处浙南沿海，拥有众多岛屿，成为倭寇侵扰的重灾区。
|
||
</p>
|
||
<p class="text-gray-700 leading-relaxed mb-4">
|
||
在这场艰苦卓绝的斗争中，涌现出无数英雄人物。王沛、王德叔侄率领乡勇抗倭，
|
||
最终壮烈牺牲；戚继光将军更是在温州地区屡败倭寇，创造了鸳鸯阵法，
|
||
为抗倭战争作出了巨大贡献。
|
||
</p>
|
||
<p class="text-gray-700 leading-relaxed">
|
||
温州人民用血肉之躯筑起了一道保卫家园的钢铁长城，
|
||
体现了中华民族团结抗倭的爱国主义精神和不怕牺牲的高尚品格。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 历史时间轴 -->
|
||
<div class="fade-in">
|
||
<h3 class="text-2xl font-bold text-center lyrics-text mb-12">重要历史节点</h3>
|
||
<div class="relative">
|
||
<div class="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-gradient-to-b from-red-600 to-yellow-600"></div>
|
||
|
||
<div class="space-y-12">
|
||
<div class="flex items-center">
|
||
<div class="w-1/2 pr-8 text-right">
|
||
<div class="bg-white/80 backdrop-blur-sm rounded-lg p-6 shadow-lg card-hover">
|
||
<h4 class="text-xl font-bold text-red-600 mb-2">1369年</h4>
|
||
<p class="text-gray-700">倭寇首次进犯温州，攻击永嘉、乐清等地</p>
|
||
</div>
|
||
</div>
|
||
<div class="w-4 h-4 bg-red-600 rounded-full border-4 border-white shadow-lg"></div>
|
||
<div class="w-1/2 pl-8"></div>
|
||
</div>
|
||
|
||
<div class="flex items-center">
|
||
<div class="w-1/2 pr-8"></div>
|
||
<div class="w-4 h-4 bg-yellow-600 rounded-full border-4 border-white shadow-lg"></div>
|
||
<div class="w-1/2 pl-8">
|
||
<div class="bg-white/80 backdrop-blur-sm rounded-lg p-6 shadow-lg card-hover">
|
||
<h4 class="text-xl font-bold text-yellow-600 mb-2">1558年</h4>
|
||
<p class="text-gray-700">王沛、王德叔侄壮烈牺牲，英桥王氏建造永昌堡</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-center">
|
||
<div class="w-1/2 pr-8 text-right">
|
||
<div class="bg-white/80 backdrop-blur-sm rounded-lg p-6 shadow-lg card-hover">
|
||
<h4 class="text-xl font-bold text-red-600 mb-2">1560年代</h4>
|
||
<p class="text-gray-700">戚继光率戚家军在温州地区屡败倭寇</p>
|
||
</div>
|
||
</div>
|
||
<div class="w-4 h-4 bg-red-600 rounded-full border-4 border-white shadow-lg"></div>
|
||
<div class="w-1/2 pl-8"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 音乐文化区域 -->
|
||
<section id="music" class="py-20 px-6">
|
||
<div class="max-w-6xl mx-auto">
|
||
<h2 class="text-4xl font-bold text-center mb-16 hero-title fade-in">音乐文化</h2>
|
||
|
||
<div class="grid md:grid-cols-2 gap-12 items-center mb-16">
|
||
<div class="fade-in">
|
||
<h3 class="text-2xl font-bold lyrics-text mb-6">陈继宁</h3>
|
||
<p class="text-gray-700 leading-relaxed mb-4">
|
||
温州学传播大使，温州市社科联理事，温州市鼓词研究会会长，国家级非遗温州鼓词陈派传人
|
||
</p>
|
||
|
||
<h3 class="text-2xl font-bold lyrics-text mb-6">温州鼓词</h3>
|
||
<p class="text-gray-700 leading-relaxed mb-4">
|
||
温州鼓词是国家级非物质文化遗产，流行于浙江温州及其毗邻地区，
|
||
用温州方言表演，具有浓厚的地方色彩和独特的艺术风格。
|
||
</p>
|
||
<p class="text-gray-700 leading-relaxed mb-4">
|
||
表演形式以一人"单档"为主，艺人自弹牛筋琴伴奏说唱。
|
||
牛筋琴是温州独有的乐器，音色浑厚柔美，为鼓词赋予了无可替代的声韵特质。
|
||
</p>
|
||
<p class="text-gray-700 leading-relaxed">
|
||
《千军万马保永昌》这首歌融合了温州鼓词的元素，
|
||
通过现代音乐手法重新演绎传统文化，
|
||
让年轻一代能够更好地理解和传承这一宝贵的文化遗产。
|
||
</p>
|
||
|
||
</div>
|
||
<div class="fade-in">
|
||
<img src="https://pjoss.x-php.com/20251210/1bfead1f41b7e0b4a291ab2da46400f7.jpg" alt="传统乐器" class="w-full rounded-2xl shadow-lg"/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 音乐特色 -->
|
||
<div class="grid md:grid-cols-3 gap-8 fade-in">
|
||
<div class="bg-white/80 backdrop-blur-sm rounded-2xl p-6 text-center shadow-lg card-hover">
|
||
<div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<span class="text-2xl">🎵</span>
|
||
</div>
|
||
<h4 class="text-xl font-bold lyrics-text mb-3">民歌长调</h4>
|
||
<p class="text-gray-700 text-sm">悠扬婉转的旋律，体现温州山水的灵秀之气</p>
|
||
</div>
|
||
|
||
<div class="bg-white/80 backdrop-blur-sm rounded-2xl p-6 text-center shadow-lg card-hover">
|
||
<div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<span class="text-2xl">🎸</span>
|
||
</div>
|
||
<h4 class="text-xl font-bold lyrics-text mb-3">摇滚力量</h4>
|
||
<p class="text-gray-700 text-sm">现代摇滚的节奏感，展现抗倭斗争的激昂斗志</p>
|
||
</div>
|
||
|
||
<div class="bg-white/80 backdrop-blur-sm rounded-2xl p-6 text-center shadow-lg card-hover">
|
||
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<span class="text-2xl">🥁</span>
|
||
</div>
|
||
<h4 class="text-xl font-bold lyrics-text mb-3">鼓词韵律</h4>
|
||
<p class="text-gray-700 text-sm">传统鼓词的独特韵味，传承非遗文化精髓</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 页脚 -->
|
||
<footer class="bg-gray-800 text-white py-12">
|
||
<div class="max-w-6xl mx-auto px-6 text-center">
|
||
<div class="hero-title text-2xl font-bold mb-4">千军万马保永昌</div>
|
||
<p class="text-gray-400 mb-6">传承温州抗倭精神，弘扬非遗鼓词文化</p>
|
||
<div class="text-sm text-gray-500">
|
||
© 2025龙湾之光AI数字偶像大赛项目. 致敬历史，传承文化，创新发展.
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
|
||
<script>
|
||
// 背景动画
|
||
let bgSketch = function(p) {
|
||
let particles = [];
|
||
let numParticles = 50;
|
||
|
||
p.setup = function() {
|
||
let canvas = p.createCanvas(p.windowWidth, p.windowHeight);
|
||
canvas.parent('bg-canvas');
|
||
|
||
// 初始化粒子
|
||
for (let i = 0; i < numParticles; i++) {
|
||
particles.push({
|
||
x: p.random(p.width),
|
||
y: p.random(p.height),
|
||
vx: p.random(-0.5, 0.5),
|
||
vy: p.random(-0.5, 0.5),
|
||
size: p.random(2, 6),
|
||
alpha: p.random(50, 150)
|
||
});
|
||
}
|
||
};
|
||
|
||
p.draw = function() {
|
||
p.clear();
|
||
|
||
// 绘制流动粒子
|
||
for (let particle of particles) {
|
||
p.fill(139, 69, 19, particle.alpha);
|
||
p.noStroke();
|
||
p.ellipse(particle.x, particle.y, particle.size);
|
||
|
||
// 更新位置
|
||
particle.x += particle.vx;
|
||
particle.y += particle.vy;
|
||
|
||
// 边界检测
|
||
if (particle.x < 0 || particle.x > p.width) particle.vx *= -1;
|
||
if (particle.y < 0 || particle.y > p.height) particle.vy *= -1;
|
||
}
|
||
|
||
// 绘制连接线
|
||
for (let i = 0; i < particles.length; i++) {
|
||
for (let j = i + 1; j < particles.length; j++) {
|
||
let dist = p.dist(particles[i].x, particles[i].y, particles[j].x, particles[j].y);
|
||
if (dist < 100) {
|
||
p.stroke(139, 69, 19, 50 * (1 - dist / 100));
|
||
p.strokeWeight(1);
|
||
p.line(particles[i].x, particles[i].y, particles[j].x, particles[j].y);
|
||
}
|
||
}
|
||
}
|
||
};
|
||
|
||
p.windowResized = function() {
|
||
p.resizeCanvas(p.windowWidth, p.windowHeight);
|
||
};
|
||
};
|
||
|
||
// 初始化背景动画
|
||
new p5(bgSketch);
|
||
|
||
// 页面加载完成后的动画
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 淡入动画
|
||
const fadeElements = document.querySelectorAll('.fade-in');
|
||
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
anime({
|
||
targets: entry.target,
|
||
opacity: [0, 1],
|
||
translateY: [30, 0],
|
||
duration: 800,
|
||
easing: 'easeOutQuart',
|
||
delay: anime.stagger(200)
|
||
});
|
||
observer.unobserve(entry.target);
|
||
}
|
||
});
|
||
});
|
||
|
||
fadeElements.forEach(el => {
|
||
observer.observe(el);
|
||
});
|
||
|
||
// 平滑滚动
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function (e) {
|
||
e.preventDefault();
|
||
const target = document.querySelector(this.getAttribute('href'));
|
||
if (target) {
|
||
target.scrollIntoView({
|
||
behavior: 'smooth',
|
||
block: 'start'
|
||
});
|
||
}
|
||
});
|
||
});
|
||
});
|
||
|
||
// 音乐播放控制
|
||
const AUDIO_URL = 'https://pjoss.x-php.com/20251210/1f5b3890c2c336bec63f9af90fe40ae2.mp3';
|
||
let isPlaying = false;
|
||
let isMuted = false;
|
||
let duration = 0;
|
||
const audio = new Audio(AUDIO_URL);
|
||
audio.preload = 'metadata';
|
||
|
||
audio.addEventListener('loadedmetadata', () => {
|
||
duration = isFinite(audio.duration) ? Math.floor(audio.duration) : 0;
|
||
const timeEls = document.querySelectorAll('.text-sm.text-gray-600');
|
||
if (timeEls[1]) {
|
||
timeEls[1].textContent = formatTime(duration);
|
||
}
|
||
});
|
||
|
||
audio.addEventListener('timeupdate', () => {
|
||
updateProgress();
|
||
});
|
||
|
||
audio.addEventListener('ended', () => {
|
||
isPlaying = false;
|
||
updatePlayButton();
|
||
updateProgress();
|
||
});
|
||
|
||
audio.addEventListener('error', () => {
|
||
showNotification('音频加载或播放失败');
|
||
});
|
||
|
||
function playMusic() {
|
||
audio.play().then(() => {
|
||
isPlaying = true;
|
||
updatePlayButton();
|
||
showNotification('音乐播放中...');
|
||
}).catch(() => {
|
||
showNotification('无法自动播放，请手动点击播放');
|
||
});
|
||
}
|
||
|
||
function togglePlay() {
|
||
if (isPlaying) {
|
||
pauseMusic();
|
||
} else {
|
||
playMusic();
|
||
}
|
||
}
|
||
|
||
function pauseMusic() {
|
||
audio.pause();
|
||
isPlaying = false;
|
||
updatePlayButton();
|
||
}
|
||
|
||
function toggleMute() {
|
||
isMuted = !isMuted;
|
||
audio.muted = isMuted;
|
||
const muteBtn = document.querySelector('button[onclick="toggleMute()"]');
|
||
muteBtn.textContent = isMuted ? '🔇' : '🔊';
|
||
}
|
||
|
||
function updatePlayButton() {
|
||
const playBtn = document.getElementById('playBtn');
|
||
playBtn.textContent = isPlaying ? '⏸' : '▶';
|
||
}
|
||
|
||
function updateProgress() {
|
||
const progressBar = document.getElementById('progressBar');
|
||
const d = duration || (isFinite(audio.duration) ? Math.floor(audio.duration) : 0);
|
||
const ct = Math.floor(audio.currentTime || 0);
|
||
const progress = d ? (ct / d) * 100 : 0;
|
||
progressBar.style.width = progress + '%';
|
||
|
||
const timeEls = document.querySelectorAll('.text-sm.text-gray-600');
|
||
if (timeEls[0]) {
|
||
timeEls[0].textContent = formatTime(ct);
|
||
}
|
||
if (timeEls[1] && d) {
|
||
timeEls[1].textContent = formatTime(d);
|
||
}
|
||
}
|
||
|
||
function formatTime(seconds) {
|
||
const mins = Math.floor(seconds / 60);
|
||
const secs = seconds % 60;
|
||
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
|
||
}
|
||
|
||
function scrollToSection(sectionId) {
|
||
const section = document.getElementById(sectionId);
|
||
if (section) {
|
||
section.scrollIntoView({
|
||
behavior: 'smooth',
|
||
block: 'start'
|
||
});
|
||
}
|
||
}
|
||
|
||
function showNotification(message) {
|
||
// 创建通知元素
|
||
const notification = document.createElement('div');
|
||
notification.className = 'fixed top-24 right-6 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50 transform translate-x-full transition-transform duration-300';
|
||
notification.textContent = message;
|
||
|
||
document.body.appendChild(notification);
|
||
|
||
// 显示动画
|
||
setTimeout(() => {
|
||
notification.classList.remove('translate-x-full');
|
||
}, 100);
|
||
|
||
// 隐藏动画
|
||
setTimeout(() => {
|
||
notification.classList.add('translate-x-full');
|
||
setTimeout(() => {
|
||
document.body.removeChild(notification);
|
||
}, 300);
|
||
}, 3000);
|
||
}
|
||
|
||
// 滚动时的视差效果
|
||
window.addEventListener('scroll', function() {
|
||
const scrolled = window.pageYOffset;
|
||
const parallax = document.querySelector('.hero-image');
|
||
if (parallax) {
|
||
const speed = scrolled * 0.5;
|
||
parallax.style.transform = `translateY(${speed}px)`;
|
||
}
|
||
});
|
||
|
||
// 导航栏滚动效果
|
||
let lastScrollTop = 0;
|
||
window.addEventListener('scroll', function() {
|
||
const nav = document.querySelector('nav');
|
||
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||
|
||
if (scrollTop > lastScrollTop && scrollTop > 100) {
|
||
// 向下滚动，隐藏导航栏
|
||
nav.style.transform = 'translateY(-100%)';
|
||
} else {
|
||
// 向上滚动，显示导航栏
|
||
nav.style.transform = 'translateY(0)';
|
||
}
|
||
|
||
lastScrollTop = scrollTop;
|
||
});
|
||
|
||
// 键盘快捷键
|
||
document.addEventListener('keydown', function(e) {
|
||
if (e.code === 'Space') {
|
||
e.preventDefault();
|
||
togglePlay();
|
||
} else if (e.code === 'KeyM') {
|
||
e.preventDefault();
|
||
toggleMute();
|
||
}
|
||
});
|
||
|
||
// 页面可见性变化处理
|
||
document.addEventListener('visibilitychange', function() {
|
||
if (document.hidden && isPlaying) {
|
||
// 页面隐藏时暂停音乐
|
||
pauseMusic();
|
||
}
|
||
});
|
||
|
||
|
||
// 页面加载时预加载资源
|
||
window.addEventListener('load', function() {
|
||
// preloadImages();
|
||
|
||
// 添加加载完成动画
|
||
anime({
|
||
targets: 'body',
|
||
opacity: [0, 1],
|
||
duration: 1000,
|
||
easing: 'easeOutQuart'
|
||
});
|
||
});
|
||
</script>
|
||
|
||
</body></html>
|