答案：结合scroll事件与transform属性可实现流畅滚动动画。通过监听window.scroll事件获取滚动距离，将其映射为translate、rotate或scale等transform参数，利用requestAnimationFrame优化性能，避免频繁重绘。示例中图片随滚动旋转放大，需注意缓存元素引用、减少布局重排，并可使用Intersection Observer替代scroll监听以提升效率。该方法轻量高效，适用于展示类页面的动态视觉效果。
要实现滚动动画效果，结合 scroll 事件与 transform 属性是一种常见且高效的方法。这种技术可以让元素在页面滚动过程中产生平滑的视觉变化，比如淡入、位移、缩放或旋转。
监听滚动事件并获取滚动位置
通过 JavaScript 监听 window 的 scroll 事件，可以实时获取当前页面的滚动距离。利用这个值来控制 CSS transform 的参数，就能实现随滚动变化的动画效果。
- 使用 window.pageYOffset 或 document.documentElement.scrollTop 获取垂直滚动位置- 将滚动值映射为 transform 所需的单位（如 px、deg、scale）
- 通过 requestAnimationFrame 优化性能，避免频繁重绘
使用 transform 实现动态变化
CSS 的 transform 属性支持 translate、rotate、scale 等操作，非常适合配合滚动数据做动态渲染。
- 滚动越多，元素向右平移越远：translateX(pageYOffset * 0.5px)- 页面下滚时让图标缓慢旋转：rotate(pageYOffset * 0.1deg)
- 背景图逐渐缩小营造视差感：scale(1 - pageYOffset * 0.0002)
简单示例：滚动时图片旋转放大
假设有一个图片元素：
立即学习“前端免费学习笔记（深入）”；
<img id="animate-img" src="example.jpg" alt="Animated Image">
JavaScript 控制其 transform 变化：
window.addEventListener('scroll', function () {
const offset = window.pageYOffset;
const img = document.getElementById('animate-img');
const rotate = offset * 0.05;
const scale = 1 + offset * 0.0005;
<p>img.style.transform = <code>rotate(${rotate}deg) scale(${scale})</code>;
});这样随着页面下滚，图片会缓慢旋转并略微放大，形成动态视觉效果。
优化建议与注意事项
直接在 scroll 事件中操作 DOM 容易引发性能问题，应加以节流和优化。
- 使用 requestAnimationFrame 包裹更新逻辑，防止过度重排- 避免频繁读写布局属性，提前缓存元素引用
- 对不需要精确响应的动画，可用 Intersection Observer 替代 scroll 监听
- 添加 will-change: transform 提示浏览器优化渲染层
基本上就这些。scroll 结合 transform 能做出轻量又流畅的动画，适合用在作品展示页、介绍性网站等场景，不复杂但容易忽略细节处理。
