diff --git a/index.html b/index.html
index 5f0d62d..69fec66 100644
--- a/index.html
+++ b/index.html
@@ -360,76 +360,91 @@
}
@keyframes sectionFadeIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
- /* 移动端：痛点和思路板块用 CSS 滚动触发动画 */
+ /* 移动端：痛点和思路板块 - GPU 加速平滑动画 */
@media (max-width: 900px) {
- /* 卡片默认微弱可见 */
+ /* 默认状态：微弱可见 + 子元素透明 */
#pain-points .pain-item {
opacity: 0.08;
+ transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
- /* 子元素默认隐藏 */
#pain-points .pain-item .pain-icon,
#pain-points .pain-item h3,
#pain-points .pain-item p,
#pain-points .pain-item .pain-num {
opacity: 0;
+ transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
+ transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+ }
+ #pain-points .pain-item .pain-icon {
+ transform: scale(0.7) translateY(15px);
+ }
+ #pain-points .pain-item h3,
+ #pain-points .pain-item p {
+ transform: translateY(25px);
+ }
+ #pain-points .pain-item .pain-num {
+ transform: translateY(15px);
}
- /* 进入视口后 */
+ /* 进入视口后：平滑过渡 */
#pain-points .pain-item.in-view {
opacity: 1;
}
#pain-points .pain-item.in-view .pain-icon {
- animation: iconPop 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
+ opacity: 0.35;
+ transform: scale(1) translateY(0);
+ transition-delay: 0.05s;
}
#pain-points .pain-item.in-view h3 {
- animation: titleSlide 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
+ opacity: 1;
+ transform: translateY(0);
+ transition-delay: 0.1s;
}
#pain-points .pain-item.in-view p {
- animation: textSlide 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
+ opacity: 1;
+ transform: translateY(0);
+ transition-delay: 0.18s;
}
#pain-points .pain-item.in-view .pain-num {
- animation: numReveal 1.2s ease 0.5s both;
+ opacity: 0.12;
+ transform: translateY(0);
+ transition-delay: 0.25s;
}
/* 思路板块同样 */
#approach .approach-item {
opacity: 0.08;
+ transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
#approach .approach-item .approach-step,
#approach .approach-item .approach-body h3,
#approach .approach-item .approach-body p {
opacity: 0;
+ transform: translateY(20px);
+ transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
+ transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
#approach .approach-item.in-view {
opacity: 1;
}
#approach .approach-item.in-view .approach-step {
- animation: textSlide 0.6s ease 0.1s both;
+ opacity: 1;
+ transform: translateY(0);
+ transition-delay: 0.05s;
}
#approach .approach-item.in-view .approach-body h3 {
- animation: titleSlide 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
+ opacity: 1;
+ transform: translateY(0);
+ transition-delay: 0.1s;
}
#approach .approach-item.in-view .approach-body p {
- animation: textSlide 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
+ opacity: 1;
+ transform: translateY(0);
+ transition-delay: 0.18s;
}
}
- @keyframes titleSlide {
- from { opacity: 0; transform: translateY(40px); }
- to { opacity: 1; transform: translateY(0); }
- }
- @keyframes textSlide {
- from { opacity: 0; transform: translateY(25px); }
- to { opacity: 1; transform: translateY(0); }
- }
- @keyframes iconPop {
- from { opacity: 0; transform: scale(0.6) translateY(20px); }
- to { opacity: 0.5; transform: scale(1) translateY(0); }
- }
- @keyframes numReveal {
- from { opacity: 0; transform: translateY(15px); }
- to { opacity: 1; transform: translateY(0); }
- }
+ @keyframes sectionFadeIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
/* 移动端痛点沉浸式布局 */
@media (max-width: 900px) {
@@ -541,7 +556,7 @@
padding-right: 0;
}
- /* 编号 - 超大背景装饰 */
+ /* 编号 - 超大背景装饰 + 视差 */
.pain-num {
position: absolute;
bottom: 30px;
@@ -551,7 +566,9 @@
color: rgba(255,255,255,0.04);
letter-spacing: -5px;
line-height: 1;
- transition: none;
+ transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+ will-change: transform;
+ transform: translateY(0);
}
/* 破局之道 - 高潮区域 */
@@ -938,36 +955,35 @@
}, { threshold: 0.15, rootMargin: "0px 0px -50px 0px" });
document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));
- // 移动端：滚动触发动画（低 threshold 确保全高元素也能触发）
+ // 移动端：轻量级 IntersectionObserver + 视差滚动
if (window.innerWidth <= 900) {
+ // 1. 入场动画
const mobileItems = document.querySelectorAll('#pain-points .pain-item, #approach .approach-item');
const mobileObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
- if (entry.isIntersecting) {
- entry.target.classList.add('in-view');
- }
+ if (entry.isIntersecting) entry.target.classList.add('in-view');
});
- }, { threshold: 0.1, rootMargin: "0px 0px -10% 0px" });
-
+ }, { threshold: 0.05, rootMargin: "0px 0px -5% 0px" });
mobileItems.forEach(item => mobileObserver.observe(item));
- // 背景网格视差
- const gridBg = document.querySelector('.pain-grid-bg');
- const painSection = document.getElementById('pain-points');
- if (gridBg && painSection) {
- let ticking = false;
- window.addEventListener('scroll', () => {
- if (!ticking) {
- requestAnimationFrame(() => {
- const rect = painSection.getBoundingClientRect();
- const progress = Math.max(0, Math.min(1, -rect.top / rect.height));
- gridBg.style.transform = `translateY(${progress * -60}px)`;
- ticking = false;
+ // 2. 背景编号视差（仅操作 transform，GPU 加速）
+ let ticking = false;
+ const painNums = document.querySelectorAll('.pain-num');
+ window.addEventListener('scroll', () => {
+ if (!ticking) {
+ requestAnimationFrame(() => {
+ painNums.forEach(num => {
+ const rect = num.parentElement.getBoundingClientRect();
+ // 计算元素在视口中的位置比例
+ const progress = -rect.top / window.innerHeight;
+ // 视差位移：数字移动速度是滚动速度的 30%
+ num.style.transform = `translateY(${progress * -40}px)`;
});
- ticking = true;
- }
- }, { passive: true });
- }
+ ticking = false;
+ });
+ ticking = true;
+ }
+ }, { passive: true });
}