如何实现Div的3D透视滚动效果？求仿orlyanan.com效果方案

先拆解该页面的核心滚动特性：元素随滚动触发入场动画、背景视差移动、分段内容的状态切换，以下是具体实现步骤：

1. 视口元素检测：用Intersection Observer替代高频scroll监听 #

这个API能高效监听元素是否进入视口，避免scroll事件的性能问题，适合触发单次入场动画：

// 配置观察器参数
const observerOpts = {
  root: null, // 以浏览器视口为根容器
  rootMargin: '0px',
  threshold: 0.1 // 元素10%进入视口时触发动画
};

// 触发动画的回调
const animateOnScroll = (entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('animate-in');
      observer.unobserve(entry.target); // 仅触发一次动画
    }
  });
};

// 初始化观察器
const observer = new IntersectionObserver(animateOnScroll, observerOpts);

// 批量监听需要动画的元素
document.querySelectorAll('.scroll-item').forEach(el => observer.observe(el));

2. CSS定义入场动画效果 #

配合上面的类名，实现淡入+位移的基础动画，可根据需求调整参数：

.scroll-item {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); /* 缓动曲线更自然 */
}

.scroll-item.animate-in {
  opacity: 1;
  transform: translateY(0);
}

3. 视差滚动效果实现 #

方案1：CSS原生视差（适合全屏背景） #

.parallax-bg {
  height: 100vh;
  background-image: url('你的背景图');
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* 固定背景，滚动时形成视差 */
}

方案2：JS控制精准视差（适合元素级视差） #

通过滚动距离计算元素位移比例，实现更灵活的视差效果：

window.addEventListener('scroll', () => {
  const scrollY = window.pageYOffset;
  // 位移比例设为0.3，数值越小视差越弱
  document.querySelector('.parallax-element').style.transform = `translateY(${scrollY * 0.3}px)`;
});

4. 分段内容的滚动状态切换 #

如果页面存在分段固定/样式切换的效果，可通过判断滚动位置给对应区块添加状态类：

const sections = document.querySelectorAll('.page-section');

window.addEventListener('scroll', () => {
  const scrollPos = window.pageYOffset;
  
  sections.forEach(section => {
    const sectionTop = section.offsetTop;
    const sectionHeight = section.offsetHeight;
    
    if (scrollPos >= sectionTop - 100 && scrollPos < sectionTop + sectionHeight - 100) {
      section.classList.add('active');
    } else {
      section.classList.remove('active');
    }
  });
});

关键优化点 #

• 优先使用transform和opacity做动画，这两个属性不会触发页面重排，性能更好；
• 对于不支持Intersection Observer的旧浏览器，可引入兼容补丁做适配；
• 避免在scroll事件中做DOM查询或复杂计算，可通过requestAnimationFrame包裹来优化性能。

内容的提问来源于stack exchange，提问作者rinkaslb