问在使用WOW.js和与animate.css集成时遇到了严重困难
EN

Stack Overflow用户

提问于 2014-10-06 20:11:05

回答 2查看 22K关注 0票数 4

我正在整理一个投资组合网站。进展得很顺利，但我真的遇到了麻烦。

我使用的是一个页面，到目前为止，我已经创建了四个div来分解我的工作。我会有图形设计作品从一边或另一边，因为用户滚动。

现在，我找到了WOW.js，它恰好可以做我想做的事情，即。只有当用户向下滚动到我的图形时，才会显示它。但对我来说，我不能让它工作，它应该是如此简单，狗风格。太令人惊讶了！

有问题的图形是一颗心，而animate.css有一个很好的‘脉搏’位的CSS我想使用。在animate.css中，WOW.js应该表现得非常出色。但我完全迷路了。我的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动画。

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

animation

javascript

css

回答 2

Stack Overflow用户

发布于 2015-01-31 18:23:45

只需将以下代码放入索引中：

<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>

票数 12

Stack Overflow用户

发布于 2014-10-07 14:14:06

这里发生了几件事：

</div >不是html标记的正确结束。

如果没有定义WOW，那么你很可能没有包含wow.js --确保你有正确的文件(请看里面有什么)和正确的路径。当你陷入困境时-摆脱所有的控制台错误，并制定一个应该可以工作的最小、最基本的解决方案-它不会那么令人困惑，也更容易找到造成麻烦的原因。

至于重复的pulse动画--就是不要。在过去，有那些和标签，它们消失是有原因的--你不应该使用它。标签，它们消失是有原因的--你不应该使用它。标签，它们消失是有原因的--你不应该使用它。标签，它们消失是有原因的--你不应该使用它。Comic Sans也是如此，除非你的站点是关于doge的。

现在，下面的示例适用于我：

<html>
<head>
<link rel="stylesheet" href="animate.css">
</head>
<body>
<script src="wow.js"></script>
<script>
  new WOW().init();
</script>
<img  src="https://dl.dropboxusercontent.com/u/19020828/heavy3.jpg" /><br>

<div class="wow  bounceInUp">
<img  src="https://dl.dropboxusercontent.com/u/19020828/heavy3.jpg" />
</div>

<div class="wow pulse">
<img  src="https://dl.dropboxusercontent.com/u/19020828/heavy3.jpg" />
</div>

</body>
</html>