0

我一直在试图弄清楚如何在滚动时触发动画，但我不太明白。基本上，我想要一个可以添加到标题中的类，该类将在具有该类的元素滚动到视图中时触发动画。

我尝试使用 jQuery Inview插件，但我无法让它做我想做的事。然后我切换到Waypoints.js并且我有点让它工作，但它并不完美。现在，当我第一次滚动到它们时，这些元素会动画，但是当我向上和向下滚动页面时它们什么都不做。动画只触发一次。

以下是我当前的代码。如果有人能帮我想出一种方法来让每次用户滚动经过它们时触发动画——以及一种压缩代码以便它基于类而不是 ID 触发的方法——那将非常棒。（现在，我对每个元素都有单独的功能。）

PS：我正在使用animate.css、wow.js、textillate.js来制作动画。

HTML

<h1 class="lettering wow fadeInDown" id="l1" data-in-effect="flipInY">Yo. Check it out.</h1>

jQuery

$(function () {
var l1 = $("#l1");
var waypoint = new Waypoint({
  element: document.getElementById('l1'),
  handler: function() {
      l1.textillate({ in: { effect: 'flipInY' } });
  },
  offset: 'bottom-in-view',
});
});

谢谢你的帮助！

编辑：我找到了一个部分解决方案，每次滚动它们时都会触发动画。但是，我似乎只能让它与ids. 我宁愿能够针对 aclass而不是必须为每个新标题编写一个单独的函数。关于如何修改以下代码以使其适用于一类的任何想法.lettering？

// Animate #l1
$(function () {
var animatel1 = $('#l1').textillate({ 
    autoStart: false,
    in: { effect: 'flipInY' },
    out: { effect: 'fadeOut', sync: true, }
});

var l1 = $("#l1");
var inview = new Waypoint.Inview({
  element: $('#l1'),
  enter: function(direction) {
  },
  entered: function(direction) {
    animatel1.textillate('in')
  },
  exit: function(direction) {
    animatel1.textillate('out')
  },
  exited: function(direction) {
  }
})  
});
4

2 回答 2

1

让它与一个类一起工作是一个循环遍历元素数组的问题。我看到您正在使用 jQuery，因此它可以帮助您处理一些样板文件：

$(function () {
  $('.your-class').textillate({ 
      autoStart: false,
      in: { effect: 'flipInY' },
      out: { effect: 'fadeOut', sync: true, }
  });

  $('.your-class').each(function() {
    new Waypoint.Inview({
      element: this,
      entered: function(direction) {
        $(this.element).textillate('in')
      },
      exit: function(direction) {
        $(this.element).textillate('out')
      }
    });
  });
});
于 2015-02-24T06:29:42.503 回答
0

这对我有用。需要将所有内容包装在一个.each()函数中。替换lettering为您的班级名称，您应该一切顺利。

  $('.lettering').each(function() {
    var animatelettering = $('.lettering').each(function(){
        $(this).textillate({ 
            autoStart: false,
            in: { effect: 'flipInY' },
            out: { effect: 'fadeOut', sync: true, }
        });
    });
    new Waypoint.Inview({
      element: this,
      enter: function(direction) {
      },
      entered: function(direction) {
        animatelettering.textillate('in')
      },
      exit: function(direction) {
        animatelettering.textillate('out')
      },
      exited: function(direction) {
      }
    });
  });
于 2015-02-24T15:47:23.767 回答