diff --git a/assets/images/TwelveOrderStars/2_1.png b/assets/images/TwelveOrderStars/2_1.png new file mode 100644 index 0000000..aff25c4 Binary files /dev/null and b/assets/images/TwelveOrderStars/2_1.png differ diff --git a/assets/images/TwelveOrderStars/2_2.png b/assets/images/TwelveOrderStars/2_2.png new file mode 100644 index 0000000..7907b3e Binary files /dev/null and b/assets/images/TwelveOrderStars/2_2.png differ diff --git a/assets/images/TwelveOrderStars/2_3.png b/assets/images/TwelveOrderStars/2_3.png new file mode 100644 index 0000000..1efbd10 Binary files /dev/null and b/assets/images/TwelveOrderStars/2_3.png differ diff --git a/assets/images/TwelveOrderStars/2_4.png b/assets/images/TwelveOrderStars/2_4.png new file mode 100644 index 0000000..78718f2 Binary files /dev/null and b/assets/images/TwelveOrderStars/2_4.png differ diff --git a/assets/images/TwelveOrderStars/2_5.png b/assets/images/TwelveOrderStars/2_5.png new file mode 100644 index 0000000..dde562c Binary files /dev/null and b/assets/images/TwelveOrderStars/2_5.png differ diff --git a/assets/images/TwelveOrderStars/2_6.png b/assets/images/TwelveOrderStars/2_6.png new file mode 100644 index 0000000..17cfab9 Binary files /dev/null and b/assets/images/TwelveOrderStars/2_6.png differ diff --git a/assets/images/TwelveOrderStars/arrow.svg b/assets/images/TwelveOrderStars/arrow.svg new file mode 100644 index 0000000..d3f82af --- /dev/null +++ b/assets/images/TwelveOrderStars/arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/TwelveOrderStars/process.svg b/assets/images/TwelveOrderStars/process.svg new file mode 100644 index 0000000..8a6dc1e --- /dev/null +++ b/assets/images/TwelveOrderStars/process.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/TwelveOrderStars/process_1_bg.png b/assets/images/TwelveOrderStars/process_1_bg.png new file mode 100644 index 0000000..1d3ff01 Binary files /dev/null and b/assets/images/TwelveOrderStars/process_1_bg.png differ diff --git a/assets/images/TwelveOrderStars/time.svg b/assets/images/TwelveOrderStars/time.svg new file mode 100644 index 0000000..ae99f20 --- /dev/null +++ b/assets/images/TwelveOrderStars/time.svg @@ -0,0 +1,124 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/pages/TwelveOrderStars.html b/pages/TwelveOrderStars.html index 90400e0..a5d4002 100644 --- a/pages/TwelveOrderStars.html +++ b/pages/TwelveOrderStars.html @@ -40,11 +40,64 @@

发射地点：酒泉卫星发射基地

-

- Page Two -

+ +
+
+
+
+
一过程
+
解释文字解释文字解释文字解释文字dawdadawdawdawdadadawdawdadwad
+
+
+
+
+
+
+
二过程
+
解释文字解释文字解释文字解释文字dawdadawdawdawdadadawdawdadwad
+
+
+
+
+
+
+
三过程
+
解释文字解释文字解释文字解释文字dawdadawdawdawdadadawdawdadwad
+
+
+
+
+
+
+
四过程
+
解释文字解释文字解释文字解释文字dawdadawdawdawdadadawdawdadwad
+
+
+
+
+
+
+
五过程
+
解释文字解释文字解释文字解释文字dawdadawdawdawdadadawdawdadwad
+
+
+
+
+
+
六过程
+
解释文字解释文字解释文字解释文字dawdadawdawdawdadadawdawdadwad
+
+
+
+
+
+
+
+
发射全过程
+
+
10
+
秒
+
diff --git a/scripts/TwelveOrderStars/index.js b/scripts/TwelveOrderStars/index.js index 030bddd..e1233ac 100644 --- a/scripts/TwelveOrderStars/index.js +++ b/scripts/TwelveOrderStars/index.js @@ -1,6 +1,42 @@ let rocketScene, rocketCamera, rocketRenderer; let rocketModel; let clock = new THREE.Clock(); +let launchAnimationActive = false; +let countdownInterval; +let currentLaunchStage = 0; +let arrowAnimation; +let currentPartIndex = 0; +let hoveredPartIndex = -1; // -1 means no part is hovered + +/** + * 鼠标事件 + * 1. 移动到当前的part上时，当前的part和stage-info显示，其他的动画继续 + */ +function setupMouseEvents() { + const parts = document.querySelectorAll('.page:nth-child(2) .parts .part'); + if (!parts.length) return; + + parts.forEach((part, index) => { + part.index = index; + part.addEventListener('mouseenter', () => { + hoveredPartIndex = index; + part.style.opacity = "1"; + part.querySelector('.stage-info').style.opacity = "1"; + }); + part.addEventListener('mouseleave', () => { + if (hoveredPartIndex === index) { + hoveredPartIndex = -1; + if (currentPartIndex === index) { + part.style.opacity = '1'; + part.querySelector('.stage-info').style.opacity = '1'; + } else { + part.style.opacity = '0.1'; + part.querySelector('.stage-info').style.opacity = '0'; + } + } + }); + }); +} /** * 初始化Three.js场景和加载3D模型 @@ -155,6 +191,193 @@ function animate() { } } +/** + * 初始化火箭发射动画 + */ +function initLaunchAnimation() { + const parts = document.querySelectorAll('.page:nth-child(2) .parts .part'); + const digitElement = document.querySelector('.page:nth-child(2) .time .digit'); + const secondElement = document.querySelector('.page:nth-child(2) .time .second'); + const arrow = document.querySelector('.page:nth-child(2) .process .arrow'); + + if (!parts.length || !digitElement || !secondElement || !arrow) return; + + // 初始设置，先给箭头设置底部位置和透明度 + arrow.classList.add('reset'); // 添加reset类以禁用过渡 + arrow.style.bottom = '0'; + arrow.style.opacity = '0'; + + // 初始化其他元素 + digitElement.textContent = '0'; + secondElement.textContent = '分钟'; + + parts.forEach(part => { + if (part.index === hoveredPartIndex) return; + if (currentPartIndex !== part.index) { + part.style.opacity = '0.1'; + part.querySelector('.stage-info').style.opacity = '0'; + } else { + part.style.opacity = '1'; + part.querySelector('.stage-info').style.opacity = '1'; + } + }); + + // 等待一小段时间，确保元素都加载完成 + setTimeout(() => { + // 直接开始发射序列而不是倒计时 + startLaunchSequence(); + }, 500); +} + +/** + * 重置火箭发射动画 + */ +function resetLaunchAnimation() { + const parts = document.querySelectorAll('.page:nth-child(2) .parts .part'); + const digitElement = document.querySelector('.page:nth-child(2) .time .digit'); + const secondElement = document.querySelector('.page:nth-child(2) .time .second'); + const arrow = document.querySelector('.page:nth-child(2) .process .arrow'); + + if (!parts.length || !digitElement || !secondElement || !arrow) return; + + // 清除任何现有的时间计数器和动画 + if (countdownInterval) clearInterval(countdownInterval); + if (arrowAnimation) clearTimeout(arrowAnimation); + + // 首先让箭头渐隐 + arrow.style.opacity = '0'; + + // 等待透明度过渡完成 + setTimeout(() => { + // 添加reset类以禁用过渡效果 + arrow.classList.add('reset'); + + // 重置箭头位置 + arrow.style.bottom = '0'; + }, 800); // 与透明度过渡时间一致 + + // 重置时间显示为0分钟 + digitElement.textContent = '0'; + secondElement.textContent = '分钟'; + + // 隐藏所有部分 + parts.forEach(part => { + if (part.index === hoveredPartIndex) return; + if (currentPartIndex !== part.index) { + part.style.opacity = '0.1'; + part.querySelector('.stage-info').style.opacity = '0'; + } else { + part.style.opacity = '1'; + part.querySelector('.stage-info').style.opacity = '1'; + } + }); + + // 重置状态变量 + launchAnimationActive = false; + currentLaunchStage = 0; +} + + + +/** + * 开始火箭发射序列 + */ +function startLaunchSequence() { + const parts = document.querySelectorAll('.page:nth-child(2) .parts .part'); + const digitElement = document.querySelector('.page:nth-child(2) .time .digit'); + const secondElement = document.querySelector('.page:nth-child(2) .time .second'); + const arrow = document.querySelector('.page:nth-child(2) .process .arrow'); + + if (!parts.length || !digitElement || !secondElement || !arrow) return; + + // 防止多次启动 + if (launchAnimationActive) return; + launchAnimationActive = true; + + // 各阶段显示的持续时间（毫秒） + const stageDuration = 1500; + const totalAnimationTime = parts.length * stageDuration; // 总动画时间（毫秒） + const timeInterval = 50; // 更新时间的间隔（毫秒） + + // 更新时间显示为分钟 + digitElement.textContent = '0'; + secondElement.textContent = '分钟'; + + // 启动发射时间计数器 + let elapsedTime = 0; + const incrementPerInterval = 56 / (totalAnimationTime / timeInterval); + + countdownInterval = setInterval(() => { + elapsedTime += incrementPerInterval; + const minutes = Math.floor(elapsedTime); + digitElement.textContent = minutes; + + if (minutes >= 56) { + digitElement.textContent = '56'; + clearInterval(countdownInterval); + } + }, timeInterval); + + // 首先确保箭头在底部且隐藏状态 + arrow.classList.add('reset'); // 先添加reset防止过渡 + arrow.style.bottom = '0'; + arrow.style.opacity = '0'; + + // 下一帧中移除reset，并显示箭头 + requestAnimationFrame(() => { + // 移除reset类，允许过渡效果 + arrow.classList.remove('reset'); + + // 先显示箭头 + arrow.style.opacity = '1'; + + // 等待箭头显示出来后，开始上升动画 + setTimeout(() => { + arrow.style.bottom = '90vh'; // 移动到顶部 + }, 300); + }); + + // 显示第一个阶段 + showLaunchStage(0); + + // 依次显示其他阶段 + for (let i = 1; i < parts.length; i++) { + setTimeout(() => showLaunchStage(i), i * stageDuration); + } + + // 全部阶段完成后重置动画 + setTimeout(() => { + resetLaunchAnimation(); + // 短暂延迟后重新开始 + setTimeout(() => startLaunchSequence(), 2000); + }, totalAnimationTime + 1000); +} + +/** + * 显示特定的发射阶段，同时隐藏其他阶段 + */ +function showLaunchStage(stageIndex) { + const parts = document.querySelectorAll('.page:nth-child(2) .parts .part'); + const stageInfo = document.querySelectorAll('.page:nth-child(2) .parts .part .stage-info'); + if (!parts.length || stageIndex < 0 || stageIndex >= parts.length) return; + + // 更新当前阶段 + currentLaunchStage = stageIndex; + + // 隐藏所有部分 + parts.forEach(part => { + if (part.index === hoveredPartIndex) return; + part.style.opacity = '0.1'; + stageInfo.forEach(info => { + info.style.opacity = '0'; + }); + }); + + // 显示当前阶段 + parts[stageIndex].style.opacity = '1'; + stageInfo[stageIndex].style.opacity = '1'; +} + /** * 初始化视频播放器功能 */ @@ -192,7 +415,16 @@ function setupVideoPlayer() { }); } -document.addEventListener("DOMContentLoaded", () => { +document.addEventListener("DOMContentLoaded", function() { + // 检查并初始化火箭模型 + initRocketModel(); + + // 设置视频播放器功能 + setupVideoPlayer(); + + // 初始化火箭发射动画 + initLaunchAnimation(); + const header = document.querySelector('.header'); const lastPageContentStarContainer = document.querySelector('.page:nth-child(3) .content .star-bg'); const bgContainer = document.querySelector('.page:nth-child(1) .bg'); @@ -214,6 +446,7 @@ document.addEventListener("DOMContentLoaded", () => { starSizeMax: 0.20, xSpeed: 0.0002, ySpeed: 0.0002, + elapsed: 0, }); @@ -221,8 +454,7 @@ document.addEventListener("DOMContentLoaded", () => { maxMeteors: 20, }); - - setupVideoPlayer(); - initRocketModel(); + + setupMouseEvents(); }); \ No newline at end of file diff --git a/styles/TwelveOrderStars/index.css b/styles/TwelveOrderStars/index.css index b21630e..a825f5d 100644 --- a/styles/TwelveOrderStars/index.css +++ b/styles/TwelveOrderStars/index.css @@ -2,6 +2,7 @@ body { min-height: 100vh; background: rgba(0, 0, 0, 1); overflow-x: hidden; + color: rgba(255, 255, 255, 1); } .container { @@ -62,7 +63,7 @@ body { justify-content: space-evenly; align-items: start; padding: 0 8rem; - background: url('../../assets/images/TwelveOrderStars/intro-mask.webp') no-repeat center center; + background: url('../../assets/images/TwelveOrderStars/intro-mask.webp') no-repeat left center; background-size: contain; } @@ -101,6 +102,406 @@ body { font-family: 'fys', sans-serif; } +.page:nth-child(2) .parts { + width: 100vw; + height: 100vh; + position: relative; + left: 0; + bottom: 0; +} + +.page:nth-child(2) .parts .part { + position: absolute; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + opacity: 1; + transition: opacity 0.8s ease-in-out; + cursor: pointer; +} + +.page:nth-child(2) .parts .part .stage-info { + opacity: 0; + transition: opacity 0.3s ease-in-out; + z-index: 10; +} + +.page:nth-child(2) .parts .part:nth-child(1) { + width: 5vw; + height: 35vh; + left: 9vw; + bottom: 2vh; + background-image: url("../../assets/images/TwelveOrderStars/2_1.png"); + position: absolute; +} + +.page:nth-child(2) .parts .part:nth-child(1) .stage-info { + position: absolute; + left: 20vw; + top: 10%; + display: flex; + width: 25vw; + flex-direction: column; + justify-content: space-evenly; + align-items: start; + gap: 1rem; +} + +.page:nth-child(2) .parts .part:nth-child(1) .stage-info .line { + position: absolute; + top: 1.2rem; + left: -50%; + width: 20rem; + height: 0.1rem; + background-color: rgba(255, 255, 255, 1); +} + +.page:nth-child(2) .parts .part:nth-child(1) .stage-info .name { + font-size: 2.4rem; + font-weight: 200; + font-family: 'fys', sans-serif; + color: rgba(255, 255, 255, 1); +} + +.page:nth-child(2) .parts .part:nth-child(1) .stage-info .intro { + font-size: 2rem; + font-weight: 200; + font-family: 'fys', sans-serif; + color: rgba(255, 255, 255, 1); +} + +.page:nth-child(2) .parts .part:nth-child(1) .stage-info .live-img { + width: 100%; + height: 20rem; + background-image: url("../../assets/images/TwelveOrderStars/process_1_bg.png"); + background-size: contain; + background-position: left; + background-repeat: no-repeat; +} + +.page:nth-child(2) .parts .part:nth-child(2) { + width: 10vw; + height: 25vh; + left: 12.5vw; + bottom: 40vh; + background-image: url("../../assets/images/TwelveOrderStars/2_2.png"); +} + +.page:nth-child(2) .parts .part:nth-child(2) .stage-info { + position: absolute; + left: 21vw; + top: 50%; + display: flex; + width: 25vw; + flex-direction: column; + justify-content: space-evenly; + align-items: start; + gap: 1rem; +} + +.page:nth-child(2) .parts .part:nth-child(2) .stage-info .line { + position: absolute; + top: 1.2rem; + left: -45%; + width: 16rem; + height: 0.1rem; + background-color: rgba(255, 255, 255, 1); +} + +.page:nth-child(2) .parts .part:nth-child(2) .stage-info .name { + font-size: 2.4rem; + font-weight: 200; + font-family: 'fys', sans-serif; + color: rgba(255, 255, 255, 1); +} + +.page:nth-child(2) .parts .part:nth-child(2) .stage-info .intro { + font-size: 2rem; + font-weight: 200; + font-family: 'fys', sans-serif; + color: rgba(255, 255, 255, 1); +} + +.page:nth-child(2) .parts .part:nth-child(2) .stage-info .live-img { + width: 100%; + height: 20rem; + background-image: url("../../assets/images/TwelveOrderStars/process_1_bg.png"); + background-size: contain; + background-position: left; + background-repeat: no-repeat; +} + +.page:nth-child(2) .parts .part:nth-child(3) { + width: 10vw; + height: 15vh; + left: 23vw; + bottom: 66vh; + background-image: url("../../assets/images/TwelveOrderStars/2_3.png"); +} + +.page:nth-child(2) .parts .part:nth-child(3) .stage-info { + position: absolute; + left: 11vw; + top: 60%; + display: flex; + width: 25vw; + flex-direction: column; + justify-content: space-evenly; + align-items: start; + gap: 1rem; +} + +.page:nth-child(2) .parts .part:nth-child(3) .stage-info .line { + position: absolute; + top: 1.2rem; + left: -20%; + width: 7rem; + height: 0.1rem; + background-color: rgba(255, 255, 255, 1); +} + +.page:nth-child(2) .parts .part:nth-child(3) .stage-info .name { + font-size: 2.4rem; + font-weight: 200; + font-family: 'fys', sans-serif; + color: rgba(255, 255, 255, 1); +} + +.page:nth-child(2) .parts .part:nth-child(3) .stage-info .intro { + font-size: 2rem; + font-weight: 200; + font-family: 'fys', sans-serif; + color: rgba(255, 255, 255, 1); +} + +.page:nth-child(2) .parts .part:nth-child(3) .stage-info .live-img { + width: 100%; + height: 20rem; + background-image: url("../../assets/images/TwelveOrderStars/process_1_bg.png"); + background-size: contain; + background-position: left; + background-repeat: no-repeat; +} + +.page:nth-child(2) .parts .part:nth-child(4) { + width: 10vw; + height: 12vh; + left: 37vw; + bottom: 80.5vh; + background-image: url("../../assets/images/TwelveOrderStars/2_4.png"); +} + +.page:nth-child(2) .parts .part:nth-child(4) .stage-info { + position: absolute; + left: 10vw; + top: 50%; + display: flex; + width: 25vw; + flex-direction: column; + justify-content: space-evenly; + align-items: start; + gap: 1rem; +} + +.page:nth-child(2) .parts .part:nth-child(4) .stage-info .line { + position: absolute; + top: 1.2rem; + left: -15%; + width: 5rem; + height: 0.1rem; + background-color: rgba(255, 255, 255, 1); +} + +.page:nth-child(2) .parts .part:nth-child(4) .stage-info .name { + font-size: 2.4rem; + font-weight: 200; + font-family: 'fys', sans-serif; + color: rgba(255, 255, 255, 1); +} + +.page:nth-child(2) .parts .part:nth-child(4) .stage-info .intro { + font-size: 2rem; + font-weight: 200; + font-family: 'fys', sans-serif; + color: rgba(255, 255, 255, 1); +} + +.page:nth-child(2) .parts .part:nth-child(4) .stage-info .live-img { + width: 100%; + height: 20rem; + background-image: url("../../assets/images/TwelveOrderStars/process_1_bg.png"); + background-size: contain; + background-position: left; + background-repeat: no-repeat; +} + +.page:nth-child(2) .parts .part:nth-child(5) { + width: 8vw; + height: 9vh; + left: 50vw; + bottom: 87vh; + background-image: url("../../assets/images/TwelveOrderStars/2_5.png"); +} + +.page:nth-child(2) .parts .part:nth-child(5) .stage-info { + position: absolute; + left: 10vw; + top: 70%; + display: flex; + width: 25vw; + flex-direction: column; + justify-content: space-evenly; + align-items: start; + gap: 1rem; +} + +.page:nth-child(2) .parts .part:nth-child(5) .stage-info .line { + position: absolute; + top: 1.2rem; + left: -15%; + width: 5rem; + height: 0.1rem; + background-color: rgba(255, 255, 255, 1); +} + +.page:nth-child(2) .parts .part:nth-child(5) .stage-info .name { + font-size: 2.4rem; + font-weight: 200; + font-family: 'fys', sans-serif; + color: rgba(255, 255, 255, 1); +} + +.page:nth-child(2) .parts .part:nth-child(5) .stage-info .intro { + font-size: 2rem; + font-weight: 200; + font-family: 'fys', sans-serif; + color: rgba(255, 255, 255, 1); +} + +.page:nth-child(2) .parts .part:nth-child(5) .stage-info .live-img { + width: 100%; + height: 20rem; + background-image: url("../../assets/images/TwelveOrderStars/process_1_bg.png"); + background-size: contain; + background-position: left; + background-repeat: no-repeat; +} + +.page:nth-child(2) .parts .part:nth-child(6) { + width: 6vw; + height: 9vh; + left: 63vw; + bottom: 88vh; + background-image: url("../../assets/images/TwelveOrderStars/2_6.png"); +} + +.page:nth-child(2) .parts .part:nth-child(6) .stage-info { + position: absolute; + left: 0vw; + top: 100%; + display: flex; + width: 25vw; + flex-direction: column; + justify-content: space-evenly; + align-items: start; + gap: 1rem; +} + +.page:nth-child(2) .parts .part:nth-child(6) .stage-info .name { + font-size: 2.4rem; + font-weight: 200; + font-family: 'fys', sans-serif; + color: rgba(255, 255, 255, 1); +} + +.page:nth-child(2) .parts .part:nth-child(6) .stage-info .intro { + font-size: 2rem; + font-weight: 200; + font-family: 'fys', sans-serif; + color: rgba(255, 255, 255, 1); +} + +.page:nth-child(2) .parts .part:nth-child(6) .stage-info .live-img { + width: 100%; + height: 20rem; + background-image: url("../../assets/images/TwelveOrderStars/process_1_bg.png"); + background-size: contain; + background-position: left; + background-repeat: no-repeat; +} + +.page:nth-child(2) .process { + width: 7rem; + height: 90vh; + position: absolute; + right: 2rem; + top: 5vh; + background-image: url("../../assets/images/TwelveOrderStars/process.svg"); + background-size: contain; + background-position: center; + background-repeat: no-repeat; + z-index: 1001; +} + +.page:nth-child(2) .process .arrow { + position: absolute; + width: 2.5rem; + height: 2.5rem; + background-image: url("../../assets/images/TwelveOrderStars/arrow.svg"); + background-size: contain; + background-position: center; + background-repeat: no-repeat; + bottom: 0; + right: 5vw; + transform: translate(-50%, 50%); + transition: bottom 10s ease-in-out, opacity 0.8s ease-in-out; + opacity: 0; +} + +.page:nth-child(2) .process .arrow.reset { + transition: none; +} + +.page:nth-child(2) .info { + position: absolute; + right: 38rem; + bottom: 42vh; + transform: translateY(-50%); + font-size: 6.4rem; + font-weight: 200; + font-family: 'fys', sans-serif; + color: rgba(255, 255, 255, 1); +} + +.page:nth-child(2) .time { + width: 32.6rem; + height: 32.6rem; + position: absolute; + right: 25rem; + bottom: 8rem; + background-image: url("../../assets/images/TwelveOrderStars/time.svg"); + background-size: contain; + background-position: center; + background-repeat: no-repeat; + display: flex; + align-items: center; + justify-content: center; + color: rgba(255, 255, 255, 1); +} + +.page:nth-child(2) .time .digit { + font-size: 12.8rem; + font-weight: 200; + font-family: 'fys', sans-serif; +} + +.page:nth-child(2) .time .second { + font-size: 3.2rem; + font-weight: 200; + font-family: 'fys', sans-serif; + transform: translate(0, 3rem); +} + .page:nth-child(3) { display: flex; align-items: center;