移动端视差滚动 + 滑动丝滑优化
- 背景编号(01-06)随滚动错位移动，速率30%，GPU加速transform - 移除will-change减少内存压力，解决滑动卡顿/拖不动问题 - IntersectionObserver阈值降至0.05，触发更自然 - 滚动监听使用requestAnimationFrame防抖动 - 编号透明度降至0.12，明确作为背景层
This commit is contained in:
Omega
parent
35bef7dad9
commit
7d16a2bb91
118
index.html
118
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 });
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in New Issue