如何使用 Waypoints.js 在滚动时触发动画答案

【问题标题】：How to Trigger Animations on Scroll with Waypoints.js如何使用 Waypoints.js 在滚动时触发动画
【发布时间】：2015-02-18 20:33:42
【问题描述】：

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

我尝试使用 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 一起工作。我宁愿能够以class 为目标，也不愿为每个新标题编写单独的函数。关于如何修改以下代码使其适用于 .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) {
  }
})  
});

【问题讨论】：

标签： javascript jquery animation jquery-waypoints inview

【解决方案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')
      }
    });
  });
});

【讨论】：

【解决方案2】：

这对我有用。需要将所有内容包装在 .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) {
      }
    });
  });

【讨论】：