当前位置：首页 > 文章列表 > 文章 > 前端 > CSS滚动动画实现技巧分享

CSS滚动动画实现技巧分享

2025-10-16 15:00:45 0浏览收藏

1. 使用 position: sticky 实现基础跟随效果

position: sticky 可以让元素在滚动到特定位置时“粘”在视口某个地方，虽然不是复杂动画，但是一种轻量的滚动交互方式。

.sticky-element {
  position: -webkit-sticky;
  position: sticky;
  top: 20px; /* 距离顶部 20px 时开始固定 */
  transition: transform 0.3s ease;
}

这个方法适合导航栏、侧边栏等需要跟随滚动的场景，但不能实现复杂的位移动画。

2. 使用 CSS 动画 + JavaScript 控制滚动触发

更灵活的方式是通过监听滚动事件，动态添加类名来触发动画。比如让一个元素在进入视口时从下方滑入。

CSS 部分：

.animate-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-up.show {
opacity: 1;
transform: translateY(0);
}

JavaScript 部分：

const elements = document.querySelectorAll('.animate-up');
function checkPosition() {
elements.forEach(el => {
const position = el.getBoundingClientRect().top;
const screenPosition = window.innerHeight * 0.8;
if (position < screenPosition) {
  el.classList.add('show');
}
});
}
window.addEventListener('scroll', checkPosition);
window.addEventListener('load', checkPosition);

当元素距离视口顶部小于设定值时，添加 show 类，触发 CSS 过渡动画，实现淡入上滑效果。

3. 使用 Intersection Observer（推荐方式）

比直接监听 scroll 更高效的是使用 Intersection Observer API，它能精准判断元素是否进入视口，性能更好。

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('show');
    }
  });
});
document.querySelectorAll('.animate-up').forEach(el => {
observer.observe(el);
});

配合上面的 CSS，这个方法适用于长页面中多个元素依次动画出现的场景，比如产品介绍、时间线等。

4. 复杂滚动位移：视差或逐帧动画

如果想实现元素随滚动持续移动（如视差背景），可以结合 transform 和滚动距离计算：

.parallax-element {
  transform: translateY(0);
  transition: transform 0.1s ease-out;
}

JavaScript 中根据 scrollTop 值动态设置位移：

window.addEventListener('scroll', () => {
  const scroll = window.pageYOffset;
  const element = document.querySelector('.parallax-element');
  element.style.transform = `translateY(${scroll * 0.3}px)`;
});

这样元素会以较慢速度跟随滚动，形成视差感。

基本上就这些常用方式。简单跟随用 sticky，进阶动画用 class + transition，高性能推荐 Intersection Observer，复杂动效结合 JS 实时控制 transform。不复杂但容易忽略的是性能优化，避免频繁操作 DOM 或绑定 heavy 的 scroll 事件。

好了，本文到此结束，带大家了解了《CSS滚动动画实现技巧分享》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！