Skip to content

Commit a3a1ff0

Browse files
committed
perf: 优化页面动画性能并减少代码冗余
- 移除 CPU 密集型的 rocketShow 函数,使用 GSAP 优化版本替代 - 减少流星效果和星星背景的数量,提高性能 - 优化鼠标悬停效果,使用 GSAP 替代 CSS 动画 - 简化代码结构,移除不必要的注释和空行 - 添加 ScrollTrigger 插件,优化滚动动画
1 parent 7a3d856 commit a3a1ff0

3 files changed

Lines changed: 306 additions & 217 deletions

File tree

index.html

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,7 @@ <h2 class="subtitle">Cosmic Inquiry Lab</h2>
140140
</div>
141141

142142
<script src="./build/gsap.js"></script>
143+
<script src="./build/scrolltrigger.js"></script>
143144
<script src="./build/three_r145.js"></script>
144145
<script src="./scripts/common/HeaderController.js"></script>
145146
<script src="./scripts/common/StarBackground.js"></script>
@@ -148,26 +149,26 @@ <h2 class="subtitle">Cosmic Inquiry Lab</h2>
148149
<script src="./scripts/common/LogoAnimation.js"></script>
149150
<script src="./scripts/index/index.js"></script>
150151
<script>
151-
const curve = document.getElementById('curve');
152-
const slider = document.getElementById('slider');
153-
const totalHeight = document.documentElement.scrollHeight - window.innerHeight;
154-
const speedFactor = 1.15;
152+
const curve = document.getElementById('curve')
153+
const slider = document.getElementById('slider')
154+
const totalHeight = document.documentElement.scrollHeight - window.innerHeight
155+
const speedFactor = 1.15
155156

156157
function updateSlider() {
157-
const scrollY = window.scrollY;
158-
const scrollFraction = scrollY / totalHeight;
159-
const pathLength = curve.getTotalLength();
160-
const offset = scrollFraction * pathLength * speedFactor;
158+
const scrollY = window.scrollY
159+
const scrollFraction = scrollY / totalHeight
160+
const pathLength = curve.getTotalLength()
161+
const offset = scrollFraction * pathLength * speedFactor
161162

162-
const point = curve.getPointAtLength(offset);
163-
const prevPoint = curve.getPointAtLength(Math.max(offset - 0.1, 0));
164-
const angle = Math.atan2(point.y - prevPoint.y, point.x - prevPoint.x) * 180 / Math.PI;
163+
const point = curve.getPointAtLength(offset)
164+
const prevPoint = curve.getPointAtLength(Math.max(offset - 0.1, 0))
165+
const angle = Math.atan2(point.y - prevPoint.y, point.x - prevPoint.x) * 180 / Math.PI
165166

166-
slider.setAttribute('transform', `translate(${point.x}, ${point.y}) rotate(${angle})`);
167+
slider.setAttribute('transform', `translate(${point.x}, ${point.y}) rotate(${angle})`)
167168
}
168169

169-
window.addEventListener('scroll', updateSlider);
170-
window.addEventListener('resize', updateSlider);
170+
window.addEventListener('scroll', updateSlider)
171+
window.addEventListener('resize', updateSlider)
171172
updateSlider();
172173
</script>
173174
</body>

0 commit comments

Comments
 (0)