一、Viewport单位核心概念

二、视差滚动效果实现

1. 基础HTML结构

<div class="parallax-container">
  <section class="parallax-layer bg-layer"></section>
  <section class="parallax-layer content-layer">
    <h2>第一屏内容</h2>
  </section>
  <section class="parallax-layer foreground-layer"></section>
</div>

2. 核心CSS代码

.parallax-container {
  height: 300vh; /* 3屏高度 */
  position: relative;
  overflow-x: hidden;
}

.parallax-layer {
  position: fixed;
  width: 100vw;
  height: 100vh;
}

.bg-layer {
  background: url('bg.jpg') center/cover;
  transform: translateZ(-2px) scale(3);
}

.content-layer {
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateZ(0);
}

.foreground-layer {
  background: url('foreground.png') center/contain;
  transform: translateZ(1px) scale(0.8);
  pointer-events: none;
}

3. 视差滚动动画

@keyframes parallax {
  from { transform: translateY(0); }
  to { transform: translateY(calc(-100vh * var(--speed))); }
}

.bg-layer {
  --speed: 0.2;
  animation: parallax linear forwards;
  animation-timeline: scroll(root);
}

.content-layer {
  --speed: 0.5;
  animation: parallax linear forwards;
  animation-timeline: scroll(root);
}

.foreground-layer {
  --speed: 0.8;
  animation: parallax linear forwards;
  animation-timeline: scroll(root);
}

三、高级应用技巧

1. 动态视口单位计算

:root {
  --vh: calc(var(--vh, 1vh) * 100);
}

.header {
  height: calc(var(--vh) - 10vw);
}

/* JS动态更新 */
window.addEventListener('resize', () => {
  document.documentElement.style.setProperty('--vh', `${window.innerHeight}px`);
});

2. 移动端适配方案

@media (max-width: 768px) {
  .parallax-layer {
    --speed: calc(var(--base-speed) * 0.5);
  }
  
  .bg-layer {
    background-size: calc(100vw * 1.5) auto;
  }
}

四、性能优化建议

• will-change：对动画元素添加will-change: transform
• 图片优化：使用WebP格式和响应式图片
• 硬件加速：启用transform3d
• 滚动节流：使用requestAnimationFrame