jquery - 如何使用 Jquery 在滚动时触发 CSS @keyframe 动画？

Question

1. 首先，我在使用 jquery 为滚动时的这些 box 元素设置动画时遇到了一些麻烦。我希望我的 动画 在我滚动到 section 的 1/4 时开始。
   1. 其次，我的 box div 曾经是垂直居中的，但在过渡期间添加了 @keyframes 后，它们不再居中。如果您删除 animation-fill-mode: forwards，您可以看到它们如何在过渡结束时返回。
   2. 还有最后一个问题。当我开始滚动时，是否可以使用 jquery 为这两个框设置动画，而不必为每个 部分 编写不同的代码？我在想，如果我将一些通用类添加到我的 box div 应该可以工作，对吧？

最初，在我的 jquery 文件中，我尝试在 box 上设置一个带有 opacity:0 的 hidden 类> div，当我开始滚动时，它会变成一个带有 opacity:1 的 showing 类。但效果并不理想。

在 YouTube 上找到的其他解决方案也没有帮助。将其他人的代码与我的代码混合似乎效果不佳。

如您所见，没有 jquery 代码，因为在我的大脑开始处理它之后它变得一团糟，有一次我认为我应该重新开始。

Here是我的 Codepen 的链接。

Jade

.landing-page
.section-one
  .box-one
.section-two
  .box-two

SASS

@mixin box()
  position: absolute
  width: 200px
  height: 200px
  background: black
.landing-page
  height: 100vh
  width: 100vw
  background: gray
.section-one
  position: relative
  height: 100vh
  width: 100vw
  background: lightblue
  .box-one
    @include box()
    top: 50%
    right: 10%
    transform: translate(-50%,-50%)
    animation-name: box-one-animation
    animation-duration: 2s
    animation-fill-mode: forwards
.section-two
  position: relative
  height: 100vh
  width: 100vw
  background: lightgreen
  .box-two
    @include box()
    top: 50%
    left: 10%
    transform: translate(-50%,-50%)
    animation-name: box-two-animation
    animation-duration: 2s
    animation-fill-mode: forwards

@keyframes box-one-animation
  0%
    transform: translateX(0)  
  100%
    transform: translateX(-50%)
@keyframes box-two-animation
  0%
    transform: translateX(0)  
  100%
    transform: translateX(50%)  

Answer 1

首先，您需要为滚动事件设置一些事件监听器，这样您就可以根据 scrollPos 或元素偏移到顶部来触发动画。

这是事件监听器:

https://developer.mozilla.org/en-US/docs/Web/Events/scroll

var last_known_scroll_position = 0;
var ticking = false;

function doSomething(scroll_pos) {
  // do something with the scroll position
  console.log(scroll_pos);
  if(scroll_pos > 200){
    console.log(document.getElementsByClassName('box-one')[0].classList);
     document.getElementsByClassName('box-one')[0].classList.add('animate-me');
  }
}

window.addEventListener('scroll', function(e) {
  last_known_scroll_position = window.scrollY;
  if (!ticking) {
    window.requestAnimationFrame(function() {
      doSomething(last_known_scroll_position);
      ticking = false;
    });
    ticking = true;
  }
});

查看 doSomething 函数，您可以在此处定义偏移量或决定整体方法。对于此的 css 部分，只需弹出一个引用您的动画以触发动画的类。

笔在这里:https://codepen.io/cidicles/pen/gzWwEz

---

有很多很棒的库可以为您制作这些类型的动画，例如 Scroll Magic 或 Skrollr，但构建您自己的库总是更有趣:p。

https://github.com/Prinzhorn/skrollr
http://scrollmagic.io/