diff --git a/assets/images/TwelveOrderStars/button-bg.svg b/assets/images/TwelveOrderStars/button-bg.svg new file mode 100644 index 0000000..3c734f2 --- /dev/null +++ b/assets/images/TwelveOrderStars/button-bg.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/videos/launch.mp4 b/assets/videos/launch.mp4 new file mode 100644 index 0000000..4d4586e Binary files /dev/null and b/assets/videos/launch.mp4 differ diff --git a/pages/TwelveOrderStars.html b/pages/TwelveOrderStars.html index 9e400bb..a45e63b 100644 --- a/pages/TwelveOrderStars.html +++ b/pages/TwelveOrderStars.html @@ -43,16 +43,39 @@

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

-

- Page Three -

+
+
+
+
+ 「 十二阶星辰 」 +
+
+ 发射纪实 + + + +
+
+
+ + +
+ diff --git a/scripts/TwelveOrderStars/index.js b/scripts/TwelveOrderStars/index.js index 53113f6..097cb3e 100644 --- a/scripts/TwelveOrderStars/index.js +++ b/scripts/TwelveOrderStars/index.js @@ -67,13 +67,81 @@ function animate() { renderer.render(scene, camera); } +/** + * 初始化视频播放器功能 + */ +function setupVideoPlayer() { + const launchDetailBtn = document.getElementById('launch-detail-btn'); + const videoPlayer = document.getElementById('video-player'); + const closeVideoBtn = document.getElementById('close-video-btn'); + const launchVideo = document.getElementById('launch-video'); + const content = document.querySelector('.page:nth-child(3) .content'); + + if (!launchDetailBtn || !videoPlayer || !closeVideoBtn || !launchVideo || !content) return; + + // 点击发射纪实按钮 + launchDetailBtn.addEventListener('click', () => { + // 添加淘出效果类 + content.classList.add('fade-out'); + + // 延迟显示视频播放器，等待内容淘出效果完成 + setTimeout(() => { + // 显示视频播放器 + videoPlayer.classList.add('active'); + // 自动播放视频 + launchVideo.play(); + }, 500); // 设置为500ms，与 CSS 过渡效果时间一致 + }); + + // 点击关闭按钮 + closeVideoBtn.addEventListener('click', () => { + // 暂停视频并重置到开头 + launchVideo.pause(); + launchVideo.currentTime = 0; + + // 隐藏视频播放器 + videoPlayer.classList.remove('active'); + + // 延迟显示内容，等待视频播放器隐藏效果完成 + setTimeout(() => { + // 移除淘出效果类，使内容重新显示 + content.classList.remove('fade-out'); + }, 500); + }); + + // 当视频播放结束时自动关闭视频播放器 + launchVideo.addEventListener('ended', () => { + // 隐藏视频播放器 + videoPlayer.classList.remove('active'); + + // 延迟显示内容，等待视频播放器隐藏效果完成 + setTimeout(() => { + // 移除淘出效果类，使内容重新显示 + content.classList.remove('fade-out'); + }, 500); + }); +} + document.addEventListener("DOMContentLoaded", () => { const header = document.querySelector('.header'); const container = document.querySelector('.container'); + const lastPageContentStarContainer = document.querySelector('.page:nth-child(3) .content .star-bg'); new HeaderController(header, { container }); + new StarBackground(lastPageContentStarContainer, { + starCount: 200, + starSizeMin: 0.08, + starSizeMax: 0.16, + xSpeed: 0.0002, + ySpeed: 0.0002, + elapsed: 0, + }); + initThreeJS(); LoadRocketModelForFirstPage(); animate(); + + // 初始化视频播放器功能 + setupVideoPlayer(); }); \ No newline at end of file diff --git a/styles/TwelveOrderStars/index.css b/styles/TwelveOrderStars/index.css index 2fdb5dc..ac9100d 100644 --- a/styles/TwelveOrderStars/index.css +++ b/styles/TwelveOrderStars/index.css @@ -1,21 +1,18 @@ body { min-height: 100vh; background: rgba(0, 0, 0, 1); + overflow-x: hidden; } .container { - height: 100vh; + min-height: 100vh; width: 100vw; - overflow-y: auto; - scroll-snap-type: y mandatory; - position: fixed; top: 0; left: 0; overflow-x: hidden; } .page { - scroll-snap-align: start; width: 100vw; height: 100vh; position: relative; @@ -65,4 +62,140 @@ body { font-size: 3.2rem; font-weight: 200; font-family: 'fys', sans-serif; +} + +.page:nth-child(3) { + display: flex; + align-items: center; + justify-content: center; +} + +.page:nth-child(3) .content { + background-image: url("../../assets/images/TwelveOrderStars/TwelveOrderStartsEndPage.svg"); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + width: 152.9rem; + height: 81.2rem; + border: 0.2rem solid rgba(100, 29, 111, 1); + border-radius: 1rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 10rem; + position: relative; +} + +.page:nth-child(3) .content .bg-color { + position: absolute; + width: 100%; + height: 100%; + background-color: rgba(14, 5, 15, 1); + z-index: -1; +} + +.page:nth-child(3) .content .star-bg { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 152.9rem; + height: 56.6rem; + z-index: 1; +} + +.page:nth-child(3) .content .title { + font-size: 9.6rem; + font-family: 'fys', sans-serif; + color: rgba(255, 255, 255, 1); +} + +.page:nth-child(3) .content .detail { + width: 22.4rem; + height: 5.6rem; + font-size: 2.4rem; + font-family: 'fys', sans-serif; + color: rgba(255, 255, 255, 1); + background-image: url("../../assets/images/TwelveOrderStars/button-bg.svg"); + background-size: contain; + background-position: center; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + z-index: 2; +} + +.page:nth-child(3) .content .detail svg { + width: 3rem; + height: 3rem; +} + +.video-player { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.9); + display: flex; + justify-content: center; + align-items: center; + z-index: 100; + opacity: 0; + visibility: hidden; + transition: opacity 0.5s ease, visibility 0.5s ease; +} + +.video-player.active { + opacity: 1; + visibility: visible; +} + +.video-player video { + width: 80%; + max-height: 80%; + border-radius: 0.5rem; + box-shadow: 0 0 2rem rgba(255, 255, 255, 0.2); +} + +.close-video { + position: absolute; + top: 5rem; + right: 5rem; + background: none; + border: none; + color: white; + font-size: 3rem; + cursor: pointer; + width: 5rem; + height: 5rem; + display: flex; + justify-content: center; + align-items: center; + border-radius: 50%; + background-color: rgba(100, 29, 111, 0.7); + transition: background-color 0.3s ease; +} + +.close-video:hover { + background-color: rgba(100, 29, 111, 1); +} + +.close-video svg { + width: 2.5rem; + height: 2.5rem; + stroke: white; + stroke-width: 0.2rem; +} + +.page:nth-child(3) .content { + transition: opacity 0.5s ease, transform 0.5s ease; +} + +.page:nth-child(3) .content.fade-out { + opacity: 0; + transform: scale(0.95); } \ No newline at end of file