javascript - 严重困扰 WOW.js 并与 animate.css 集成

Question

我正在努力建立一个投资组合网站。它进展顺利，但我遇到了一个真正的粗毛。

我正在使用一个页面，到目前为止已经制作了四个 div 来分解我的工作。当用户滚动时，我将让图形设计作品从一侧或另一侧进入。

现在，我发现 WOW.js 应该可以准确地完成我想要的，即。使我的图形仅在用户向下滚动到它时显示。但对于我来说，我无法让它工作，而且它应该是如此简单，总督风格。太神奇了!

有问题的图形是一颗心，animate.css 有一个很棒的“脉冲”CSS，我想使用它。 WOW.js 应该与 animate.css 完美结合。但我完全迷路了。我的JS功底还很基础，请耐心等待。

正如 WOW.js 文档所述，我已将其链接到:

<link rel="stylesheet" href="css/animate.css">

(我的 CSS 文件夹名为 public，但我看不出这有什么不同...？)

这是在我的索引页面的底部:

<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>

我将 CSS 类添加到 HTML 元素中，如下所示:

<div class="wow">  Content to Reveal Here  </div >

然后你应该给元素添加 animate.css 样式:

<div class="wow pulse">  Content to Reveal Here  </div >

但我遗漏了一些东西，因为没有任何效果。我用谷歌搜索了这个，我不是唯一遇到 WOW.js 问题的人，但我已经尝试了所有方法，现在我求助于你。

在文档的自定义设置下，它建议高级设置:

wow = new WOW(
    {
    boxClass:     'wow',      // default
    animateClass: 'animated', // default
    offset:       0          // default
   }
)
wow.init();

我在想，因为这根本不是那么令人惊奇，我必须有另一种方法来做到这一点，但仍然能够使用 CSS 动画。

最后一个问题:如何让脉冲动画继续？它脉冲几次，然后停止，但我希望它一遍又一遍地继续。有什么建议吗？

Answer 1

只需将此代码放入您的索引中:

<script src="//cdnjs.cloudflare.com/ajax/libs/wow/0.1.12/wow.min.js"></script>
<script>new WOW().init();</script>

无需调用

<script src="wow.js"></script>