将 animate.css 与航路点结合答案

【问题标题】：Combine animate.css with waypoints将 animate.css 与航路点结合
【发布时间】：2017-08-24 14:40:34
【问题描述】：

我一直在尝试将 animate.css 与航点结合起来，但我无法让动画正常工作。 Animate.css 创建动画，但它们都发生在页面加载时。我希望动画在元素进入屏幕时发生，这就是我使用航点的原因。

我已将动画和航点文件加载到我的站点中，并且正在链接到它们。当我加载我的页面时，我看到我的文本消失了（不透明度设置为 0），但是当我滚动时动画没有出现。请帮忙！

在我的标题中：

<link rel="stylesheet" href="../../Webartifacts/animate.css-master/animate.min.css">

<script src="../../Webartifacts/imakewebthings-waypoints-34d9f6d/lib/jquery.waypoints.min.js"></script>

<script>    
    $(document).ready(function(){

  // hide our element on page load
  $('#animateheader').css('opacity', 0);

  $('#animateheader').waypoint(function() {
      $('#animateheader').addClass('fadeInUp');
  }, { offset: '70%' });

});
</script>

我想要动画的 div：

<div class="container animated" id="animateheader" style="margin-top:2%;margin-bottom:2%">
            <center>
                <font face="arial" color="#009fdb" size="+3">You + small changes = big change over time.</font><br><br>
                <font face="arial" color="#009fdb" size="+2">Your weekly dose of leadership, strategy, and personal development tips.<br><br>
                <font>
            </center>   
 </div><!--end container-->

我使用这个网站创建了这个：https://spin.atomicobject.com/2015/05/31/scroll-anmiation-css-waypoints/

【问题讨论】：

我猜脚本和/或 css 文件的路径有问题，因为您的代码对我来说似乎工作正常：codepen.io/imjosh/pen/GWwLmx?editors=1111我正在加载 waypoints.js 和动画来自 CDN 的 .css。我建议您也这样做或将您的相对路径更改为绝对路径
看看this article，它只是将Waypoints与animate.css结合起来

标签： jquery html animation jquery-waypoints animate.css

【解决方案1】：

带有 animate.css 的航点

只需添加一个“向右淡入”类，您想将动画添加到多个元素中

$('.fade-in-right').css('opacity', 0);
$('.fade-in-right').waypoint(function() {
    $('.fade-in-right').addClass('fadeInRight');
}, { offset: '70%' });

$('.fade-in-left').css('opacity', 0);
$('.fade-in-left').waypoint(function() {
    $('.fade-in-left').addClass('fadeInLeft');
}, { offset: '70%' });

$('.fade-in-up').css('opacity', 0);
$('.fade-in-up').waypoint(function() {
    $('.fade-in-up').addClass('fadeInUp');
}, { offset: '70%' });

$('.fade-in-up').css('opacity', 0);
$('.fade-in-up').waypoint(function() {
    $('.fade-in-up').addClass('fadeInUp');
}, { offset: '70%' });

【讨论】：