jQuery和Greensock动画——用classname动画屏幕上的所有元素

jQuery and Greensock animations -- animate all elements on screen with classname

本文关键字：动画 元素 classname Greensock jQuery 屏幕      更新时间：2023-09-26

我试图在我的页面上，一旦他们滚动到视图匹配类"customers"的所有元素动画。

当前版本:

$(window).on('scroll', function() {
  if(!$('.customers').hasClass('animated')) {
    if($('.customers').isOnScreen(0.45, 0.45)) {
      TweenMax.staggerTo($('.customer'), 0.3, {bottom:"+=50px", opacity:1,  ease: Power2.easeOut}, 0.15);
      $('.customers').addClass('animated');
    }
  }
})

用于在第一个元素进入屏幕时使其动画化，不幸的是，结果也会在其他元素离开屏幕时使其动画化。我想要发生的是，当滚动到视图中时，每个与"customers"匹配的元素都会显示动画。

(注意，isOnScreen是一个自定义函数，用于在窗口内进行元素检测)。

我已经尝试使用jquery的每个函数如下:

$(window).on('scroll', function() {
    $('.customers').each(function( i ) {  
      if(!this.hasClass('animated')) {
        if(this.isOnScreen(0.45, 0.45)) {
          TweenMax.staggerTo($('.customer'), 0.3, {bottom:"+=50px", opacity:1,  ease: Power2.easeOut}, 0.15);
          this.addClass('animated');
        }
      }
})

我还尝试将每个"this"语句包装为jquery元素$(this)。

我得到意想不到的行为，在元素继续动画，因为我滚动，即使他们应该有他们的"动画"类删除(我希望他们只有动画第一次进入屏幕)。

我想我可能需要做的是创建一个客户数组，然后对数组中的每个元素执行TweenMax，但我不确定这是否会起作用。

好了，这就是我认为你需要做的。

  • 当然，首先必须为window对象上的scroll事件设置一个侦听器。
    • 然后使用each循环遍历.customers元素。然后你检查是否每个这些.customers元素已经有一个animated类。如果他们这样做，那么什么也不会发生;如果他们不这样做，其余的就会随之而来。
  • 当前的.customers元素，然后检查它是否在使用自定义函数.isonScreen()定义的视口区域。
  • 然后TweenMax将在当前循环的.customers元素中找到的.customer元素动画化。注意父元素.customers和子元素.cusotmer之间的区别。记住，我们在一个循环中，所以每个.customers元素都是循环的，然后我们进一步尝试在每个.customer元素中找到CC_15元素。帮助我们查找内部.customer元素的jQuery是:接下来，在CSS中，opacity: 0;行先前为.customer元素注释掉了。我把它取消了。
  • 然后我们使用TweenMax的.staggerFromTo方法来定义一组初始属性来开始我们的渐变，并结束另一组属性，所有这些都在动画之间使用一点交错，这样它们就不会同时出现，也不会在下一个播放之前等待彼此完成。这是一个重叠动画。
    • 另一件需要注意的事情是，我们正在动画元素的y属性，这是TweenMax提供的一个特殊属性，它基本上是动画translateY(...)属性的快捷方式，就像你使用CSS一样。
  • 最后，在当前循环的.customers元素上应用.animated类。
JavaScript: 

$(window).on('scroll', function() {
    $('.customers').each(function() {
        if (!$(this).hasClass('animated')) {
            if ($(this).isOnScreen(0.45, 0.45)) {
                TweenMax.staggerFromTo($(this).find('.customer'), 0.3, {
                    y: 200,
                    opacity: 0
                }, {
                    y: 0,
                    opacity: 1,
                    ease: Power2.easeOut
                }, 0.15);
                $(this).addClass('animated');
            }
        }
    });
});

这里是小提琴。

相关文章：