javascript - 如何将动画应用于元素直到滚动到它？

Question

我的页面上有一些技能栏，如下所示:

我使用以下 CSS 来制作动画。

.progress {
  height: 10px;
  background: #333;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 30px;
  overflow: visible;
}

.progress .progress-bar {
  position: relative;
  -webkit-animation: animate-positive 2s;
  animation: animate-positive 2s;
}

.progress .progress-bar:after {
  content: "";
  display: inline-block;
  width: 9px;
  background: #fff;
  position: absolute;
  top: -10px;
  bottom: -10px;
  right: -1px;
  z-index: 1;
  transform: rotate(35deg);
}

.progress .progress-value {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  position: absolute;
  top: -30px;
  right: -25px;
}

@-webkit-keyframes animate-positive {
  0% {
    width: 0;
  }
}

@keyframes animate-positive {
  0% {
    width: 0;
  }
}

<div class="progress">
  <div class="progress-bar" style="width:60%; background:linear-gradient(to bottom right, #a1c4fd, #c2e9fb);">
    <div class="progress-value">60%</div>
  </div>
</div>

如何让它们保持在 0% 直到我滚动到这部分？我知道 jQuery 中的 scrollTo 函数，但我不知道如何应用到这个函数。

Answer 1

您可以将 wowjs 与 animate.css 一起使用!它很简单，您可以在任何元素进入视口(viewport)时对其应用效果。它还为您提供了操纵动画延迟、动画持续时间等的选项。

以下是链接:

WowJS: http://mynameismatthieu.com/WOW/

AnimateCSS https://daneden.github.io/animate.css/