Javascript 被WOW.js和animate.css严重困扰_Javascript_Css_Animation

Javascript 被WOW.js和animate.css严重困扰

javascript css animation

Javascript 被WOW.js和animate.css严重困扰,javascript,css,animation,Javascript,Css,Animation,我正在整理一个投资组合网站。进展顺利，但我碰到了一个真正的麻烦我用了一页，到目前为止，我已经做了四个div来分解我的工作。当用户滚动时，我会从一边或另一边输入图形设计作品现在，我找到了WOW.js，它应该做我想做的事情，也就是说，只有当用户向下滚动到它时，我的图形才会显示出来。但就我的生活而言，我无法让它工作，而且它应该是如此简单，狗式的。太令人惊讶了所讨论的图形是一个心脏，animate.css有一个很棒的css“脉冲”位，我想使用。WOW.js应该与animate.css完美结合。但是

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

我用了一页，到目前为止，我已经做了四个div来分解我的工作。当用户滚动时，我会从一边或另一边输入图形设计作品

现在，我找到了WOW.js，它应该做我想做的事情，也就是说，只有当用户向下滚动到它时，我的图形才会显示出来。但就我的生活而言，我无法让它工作，而且它应该是如此简单，狗式的。太令人惊讶了

所讨论的图形是一个心脏，animate.css有一个很棒的css“脉冲”位，我想使用。WOW.js应该与animate.css完美结合。但是我完全迷路了。我的JS技能仍然很基础，所以请耐心等待

正如WOW.js文档所述，我通过以下链接与之链接：

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

我在想，既然这一点都不令人惊讶，那么我必须有另一种方法来做到这一点，但仍然能够使用CSS动画

最后一个问题：如何使pulse动画继续？它脉冲几次，然后停止，但我希望它继续一次又一次。建议？

这里发生了几件事：

不是html标记的正确结尾

如果没有定义WOW，那么您很可能没有包含

WOW.js

——确保您有正确的文件（请参阅其中的内容）和正确的路径。当你陷入困境时——摆脱所有控制台错误，制定一个最低限度的、基本可行的解决方案——就不会那么混乱，也更容易找到导致问题的原因

至于重复脉冲动画-只是不要。在过去，有这些和标签，它们不存在是有原因的——你不应该使用它。除非你的网站是关于狗的，否则情况也是如此

下面的例子对我很有用：

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


新的WOW（）.init（）；

只需将此代码放入索引：

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


新的WOW（）.init（）；

不需要打电话

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

标签需要指向CSS文件。你说它在一个名为“public”的文件夹中，所以它应该是

href=“public/animate.css”

，而不是

href=“css/animate.css”

，这是我的错误。我的实际代码确实正确地键入了href=“public/animate.css”控制台中是否有任何错误？我完全忘了检查控制台！好的，我有两条ERR\u FILE\u NOT\u FOUND消息。一个是javascript/index.js。我很确定我删除了那个文件，因为我认为我不再需要它了。但情况可能并非如此。第二个错误让我很困惑，因为它正在我的github.io文件夹下查找一个名为js/wow.min.js的文件。我不知道那是什么。最后，最后一个错误是“WOW未定义”。这是有道理的，但我不确定该如何定义它。谢谢Maciej。我会让你知道进展如何。另外，我发布的代码是从开发者网站直接复制粘贴的，所以这就是结束的原因。希望我在一小时前看到你的答案。我使用了您的代码，并稍微更新了版本，它立即修复了我的问题。新的WOW（）.init（）；

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

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

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