CSS动画与滚动事件结合应用_scroll与animation动画_技术教程

通过监听scroll事件并结合CSS动画，可实现滚动触发和进度控制的视觉效果。使用JavaScript检测元素可见性，动态添加类名或更新CSS变量，驱动animation播放或调整动画状态，同时应用节流、缓存布局等优化手段提升性能，确保流畅交互。

在现代网页开发中，CSS动画与滚动事件的结合能实现令人印象深刻的视觉效果。通过监听用户的滚动行为，控制元素的动画播放时机或状态，可以让页面更具交互性和吸引力。下面介绍如何将原生JavaScript的scroll事件与CSS的animation动画有效结合使用。

1. 滚动触发CSS动画（Scroll + Animation）

最常见的应用场景是当用户滚动到某个元素时，才开始播放该元素的CSS动画。这样可以避免页面加载时所有动画同时播放，提升性能和用户体验。

实现思路： 使用JavaScript监听页面的scroll事件，检测目标元素是否进入视口（viewport），一旦进入，就为其添加一个类名，从而触发预先定义好的CSS animation动画。

示例代码：

滑动出现动画

.box {
  opacity: 0;
  transform: translateY(50px);
  animation: fadeUp 1s forwards;
  animation-play-state: paused; /* 初始暂停动画 */
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.box.visible {
  animation-play-state: running; /* 滚动到可视区域后运行动画 */
}

const box = document.querySelector('.box');

function checkVisibility() {
  const rect = box.getBoundingClientRect();
  // 元素顶部进入视口且底部未完全离开视口
  if (rect.top < window.innerHeight && rect.bottom > 0) {
    box.classList.add('visible');
  }
}

// 页面加载和滚动时检查
window.addEventListener('load', checkVisibility);
window.addEventListener('scroll', checkVisibility);

这里的关键是将CSS动画设置为paused状态，仅当元素可见时通过JS切换为running，实现“懒执行”动画。

2. 滚动进度控制动画进度（Scroll-driven Animation）

更高级的用法是让动画的播放进度与滚动位置同步。例如，一个元素随着页面滚动从透明变为完全不透明，或者旋转角度随滚动逐步增加。

虽然目前标准CSS还不全面支持“滚动绑定动画时间轴”，但可以通过JavaScript动态计算滚动比例，并更新CSS自定义属性（CSS变量）来驱动关键帧变化。

示例：根据滚动百分比控制旋转角度

.progress-box {
  width: 100px;
  height: 100px;
  background: #3498db;
  margin: 200vh 0; /* 留出滚动空间 */
  transform: rotate(calc(var(--rotate, 0) * 1deg));
  transition: transform 0.1s ease;
}

const progressBox = document.querySelector('.progress-box');

function updateRotation() {
  const scrollTop = window.pageYOffset;
  const docHeight = document.documentElement.scrollHeight - window.innerHeight;
  const scrollPercent = scrollTop / docHeight; // 0 ~ 1
  const rotateValue = scrollPercent * 360;     // 0 ~ 360度

  progressBox.style.setProperty('--rotate', rotateValue);
}

window.addEventListener('scroll', updateRotation);
window.addEventListener('load', updateRotation);

这种方式利用CSS变量和transform结合，实现了滚动驱动的动画效果，流畅且性能良好。

3. 性能优化建议

scroll事件频繁触发，不当处理会导致页面卡顿。以下是几个实用建议：

使用requestAnimationFrame节流scroll回调，避免过度重绘
缓存DOM元素和布局信息（如getBoundingClientRect），减少重复计算
对已触发过动画的元素做标记，防止重复执行
优先使用transform和opacity，它们由GPU加速，性能更好

优化后的监听方式示例：

let ticking = false;

function updateOnScroll() {
  if (!ticking) {
    requestAnimationFrame(function() {
      checkVisibility();
      updateRotation();
      ticking = false;
    });
    ticking = true;
  }
}

window.addEventListener('scroll', updateOnScroll);

基本上就这些。通过合理结合scroll事件与CSS animation，你可以创建出既美观又高效的滚动动画效果。关键是控制好触发时机和性能平衡，避免影响用户体验。