通过滚动触发CSS关键帧动画 [英] Trigger a CSS keyframe animation via scroll

问题描述

假设我有一个带动画的元素：

Say I have an element with an animation:

#element {
  animation: Fade 3s linear 1s forwards;
}

@keyframes Fade {
  /* do stuff */
}

如果用户向下滚动，我该如何触发此动画？ Vanilla JS，jQuery，ScrollMagic，GSAP / TweenMax，但是你想要这样做。

How can I trigger this animation only when the user scrolls down? Vanilla JS, jQuery, ScrollMagic, GSAP/TweenMax, however you want to do it.

添加动画属性本身会触发效果吗？因此，用户滚动到某个点/元素，然后我应用类似： $（'＃element'）。css（'animation'，'Fade 3s linear 1s forward'）; ？

Would adding the animation property itself trigger the effect? So, a user scrolls to a certain point/element, and then I apply something like: $('#element').css('animation', 'Fade 3s linear 1s forwards');?

推荐答案

当用户向下滚动时，向其上添加动画的元素添加一个类。

Add a class to element that has the animation on it when the user scrolls down.

on window scroll {
  if (scroll pos > x) {
    element.addclass("animateMe");
  }
}

演示

http://jsbin.com/zuqexigepe/edit?html,output

如果您希望每次用户滚过某个点时动画都会发生，您只需更改滚动事件即可删除该类，如下所示：

If you want the animation to happen every time the user scrolls past a certain point, you can simply change the scroll event to remove the class as well, like so:

$(window).scroll(function () {
  if($(window).scrollTop() > 0) {
    element.addClass("animateMe");
  }
  else {
    element.removeClass("animateMe");
  }
});

这篇关于通过滚动触发CSS关键帧动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！