diff --git a/index.html b/index.html
index 69fec66..605093c 100644
--- a/index.html
+++ b/index.html
@@ -358,35 +358,33 @@
#pain-points .pain-grid > .fade-up:nth-child(5) { animation-delay: 0.55s; }
#pain-points .pain-grid > .fade-up:nth-child(6) { animation-delay: 0.65s; }
}
- @keyframes sectionFadeIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
-
- /* 移动端：痛点和思路板块 - GPU 加速平滑动画 */
+ /* 移动端：痛点和思路板块 - 错位动画 */
@media (max-width: 900px) {
- /* 默认状态：微弱可见 + 子元素透明 */
+ /* 默认状态：卡片微弱可见 */
#pain-points .pain-item {
opacity: 0.08;
- transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+ transition: opacity 0.7s 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 {
+ #pain-points .pain-item p {
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);
+ transform: translateY(40px);
+ transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
+ transform 0.7s 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);
+ transform: scale(0.6) translateY(40px);
}
+ /* 数字默认在上方（准备从上往下滑入） */
#pain-points .pain-item .pain-num {
- transform: translateY(15px);
+ opacity: 0;
+ transform: translateY(-70px);
+ transition: opacity 0.9s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
- /* 进入视口后：平滑过渡 */
+ /* 进入视口后：内容上移，数字下落 */
#pain-points .pain-item.in-view {
opacity: 1;
}
@@ -398,31 +396,31 @@
#pain-points .pain-item.in-view h3 {
opacity: 1;
transform: translateY(0);
- transition-delay: 0.1s;
+ transition-delay: 0.12s;
}
#pain-points .pain-item.in-view p {
opacity: 1;
transform: translateY(0);
- transition-delay: 0.18s;
+ transition-delay: 0.2s;
}
#pain-points .pain-item.in-view .pain-num {
- opacity: 0.12;
+ opacity: 0.15;
transform: translateY(0);
- transition-delay: 0.25s;
+ transition-delay: 0.08s;
}
/* 思路板块同样 */
#approach .approach-item {
opacity: 0.08;
- transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+ transition: opacity 0.7s 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);
+ transform: translateY(30px);
+ transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
+ transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
#approach .approach-item.in-view {
opacity: 1;
@@ -435,12 +433,12 @@
#approach .approach-item.in-view .approach-body h3 {
opacity: 1;
transform: translateY(0);
- transition-delay: 0.1s;
+ transition-delay: 0.12s;
}
#approach .approach-item.in-view .approach-body p {
opacity: 1;
transform: translateY(0);
- transition-delay: 0.18s;
+ transition-delay: 0.2s;
}
}
@@ -463,27 +461,29 @@
margin-right: auto;
max-width: 90%;
}
+ /* 背景网格 - 钉在墙上完全不动 */
.pain-grid-bg {
- position: absolute;
+ position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 0;
animation: none;
background-image:
- linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
- linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
+ linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
background-size: 60px 60px;
}
.pain-glow {
- position: absolute;
+ position: fixed;
top: 50%; left: 50%;
width: 400px; height: 400px;
transform: translate(-50%, -50%);
- background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
+ background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
animation: glowPulse 6s ease-in-out infinite alternate;
z-index: 0;
pointer-events: none;
}
+ /* 内容层 - 在背景上正常滚动 */
.pain-grid {
display: flex;
flex-direction: column;
@@ -556,19 +556,16 @@
padding-right: 0;
}
- /* 编号 - 超大背景装饰 + 视差 */
+ /* 编号 - 超大背景装饰 */
.pain-num {
position: absolute;
- bottom: 30px;
- right: 24px;
- font-size: 100px;
+ bottom: 40px;
+ right: 30px;
+ font-size: 110px;
font-weight: 900;
- color: rgba(255,255,255,0.04);
+ color: rgba(255,255,255,0.08);
letter-spacing: -5px;
line-height: 1;
- transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
- will-change: transform;
- transform: translateY(0);
}
/* 破局之道 - 高潮区域 */
@@ -955,9 +952,8 @@
}, { threshold: 0.15, rootMargin: "0px 0px -50px 0px" });
document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));
- // 移动端：轻量级 IntersectionObserver + 视差滚动
+ // 移动端：轻量级 IntersectionObserver（入场错位动画由 CSS transition 处理）
if (window.innerWidth <= 900) {
- // 1. 入场动画
const mobileItems = document.querySelectorAll('#pain-points .pain-item, #approach .approach-item');
const mobileObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
@@ -965,25 +961,6 @@
});
}, { threshold: 0.05, rootMargin: "0px 0px -5% 0px" });
mobileItems.forEach(item => mobileObserver.observe(item));
-
- // 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 = false;
- });
- ticking = true;
- }
- }, { passive: true });
}