如何实现Progress Bar动画在滚动到指定网站区块时触发

解决方案思路 #

• 移除CSS中默认绑定在.bar上的动画，将动画逻辑独立为一个专属类
• 通过JavaScript监听页面滚动事件，判断目标区块是否进入视口范围
• 区块进入视口时为进度条添加动画类，同时确保动画仅触发一次，避免重复执行

修改后的CSS代码 #

body {
  margin: 0;
  background-color: #101214;
}

.title {
  text-align: center;
  color: #fff;
}

.right {
  color: white;
  /* 增加上边距方便测试滚动触发效果，实际项目可按需调整 */
  margin-top: 1000px;
}

.progress-bar {
  background-color: #959595;
  width: 600px;
  height: 10px;
  border-radius: 5px;
}

.progress-bar div {
  height: 1rem;
  border-radius: 5px;
  width: 0%;
}

.progress-bar div span {
  height: 40px;
  width: 40px;
  float: right;
  margin-top: -12px;
  color: #d1d8e0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
}

.bar {
  background-color: #374850;
}

/* 将动画逻辑提取为独立类，默认不触发 */
.animate-bar {
  animation: bar 1s linear forwards;
}

@keyframes bar {
  100% {
    width: 100%;
  }
}

修改后的HTML代码 #

<h1 class="title">My Skills</h1>
<div class="right" id="skills-section">
  <h2>Builder Reliability</h2>
  <div class="progress-bar">
    <div class="bar"><span>100%</span></div>
  </div>
  <h2>Construction Quality</h2>
  <div class="progress-bar">
    <div class="bar"><span>100%</span></div>
  </div>
  <h2>Connectivity</h2>
  <div class="progress-bar">
    <div class="bar"><span>100%</span></div>
  </div>
  <h2>Competitive pricing</h2>
  <div class="progress-bar">
    <div class="bar"><span>100%</span></div>
  </div>
</div>

JavaScript 触发逻辑 #

// 获取目标区块元素
const skillsSection = document.getElementById('skills-section');
// 获取所有进度条元素
const progressBars = document.querySelectorAll('.bar');
// 标记动画是否已触发，防止重复执行
let animationTriggered = false;

// 监听页面滚动事件
window.addEventListener('scroll', () => {
  if (animationTriggered) return;

  // 获取区块相对于视口的位置信息
  const sectionTop = skillsSection.getBoundingClientRect().top;
  // 获取当前视口高度
  const viewportHeight = window.innerHeight;

  // 当区块顶部进入视口80%范围时触发动画，阈值可按需调整
  if (sectionTop < viewportHeight * 0.8) {
    progressBars.forEach(bar => {
      bar.classList.add('animate-bar');
    });
    animationTriggered = true;
    // 动画触发后移除滚动监听，优化页面性能
    window.removeEventListener('scroll', arguments.callee);
  }
});

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