js实现视差效果
实现视差效果的方法
视差效果通过让不同层次的元素以不同速度移动，营造出深度感。以下是几种常见的实现方式：
使用CSS和JavaScript结合
通过监听滚动事件，调整不同图层的位置或透明度：
window.addEventListener('scroll', function() {
const scrolled = window.scrollY;
const parallaxElements = document.querySelectorAll('.parallax');
parallaxElements.forEach(element => {
const speed = parseFloat(element.dataset.speed);
element.style.transform = `translateY(${scrolled * speed}px)`;
});
});对应HTML结构：
<div class="parallax" data-speed="0.5"></div>
<div class="parallax" data-speed="0.3"></div>使用requestAnimationFrame优化性能
避免直接监听scroll事件带来的性能问题：
let lastScroll = 0;
function updateParallax() {
const currentScroll = window.scrollY || window.pageYOffset;
if (Math.abs(currentScroll - lastScroll) >= 1) {
document.querySelector('.parallax-bg').style.transform =
`translateY(${currentScroll * 0.7}px)`;
lastScroll = currentScroll;
}
requestAnimationFrame(updateParallax);
}
updateParallax();使用CSS perspective属性
纯CSS方案适合简单场景：
.parallax-container {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax-layer {
position: absolute;
transform-style: preserve-3d;
}
.parallax-layer-base {
transform: translateZ(0);
}
.parallax-layer-back {
transform: translateZ(-1px) scale(2);
}使用现成库
常见视差库包括：
- Parallax.js：轻量级库，支持移动设备
- Rellax.js：高性能视差库
- ScrollMagic：复杂滚动交互场景
示例使用Rellax：
new Rellax('.parallax-element', {
speed: -2,
center: true
});性能优化建议
避免在滚动事件中进行复杂的DOM操作，使用transform和opacity等硬件加速属性。考虑使用will-change属性提前告知浏览器可能的变化：
.parallax-element {
will-change: transform;
}对于移动端，注意触摸事件的兼容性处理，并考虑使用passive event listeners改善滚动性能。
