WOW.js和animate.css的集成让我非常困惑

Question

WOW.js和animate.css的集成让我非常困惑

javascriptcssanimation

4

我正在制作一个作品集站点。进展顺利，但我遇到了一些困难。

我使用了一个页面，并已经创建了四个div来分隔我的工作内容。当用户滚动页面时，我会从左边或右边加入一些平面设计作品。

现在，我发现了WOW.js，它可以做我想要的事情，即只有当用户向下滚动页面时才会显示我的平面设计作品。但是，这个插件就是无法让我使用，尽管据说很简单，像doge一样。太神奇了！

我想要展示的平面设计作品是一个心形图案，并且animate.css有一个很棒的“pulse” 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>

我在HTML元素中添加了CSS类，像这样：

<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动画。

最后一个问题：如何让脉冲动画继续进行？它会跳动几次，然后停止，但我希望它不断重复。有什么建议吗？

- patski

href 标签需要指向 CSS 文件。你说它在一个名为 "public" 的文件夹中，所以应该是 href="public/animate.css"，而不是 href="css/animate.css"。 - entropic

那是我的错误。我的实际代码已经正确地键入为href="public/animate.css"。 - patski

你的控制台有任何错误吗？ - hakazvaka

我完全忘记检查控制台了！好的，我有两个ERR_FILE_NOT_FOUND消息。一个是javascript/index.js。我很确定我删除了那个文件，因为我认为我不再需要它。但这可能不是这种情况。第二个错误真的让我感到困惑，因为它正在寻找一个在我的github.io文件夹下名为js/wow.min.js的文件。我不知道那是什么。最后，最后一个错误说“WOW未定义”。这是有道理的，但我不确定我应该如何定义它。 - patski

2个回答

0

这里发生了几件事情：

</div > 不是一个正确的 HTML 标签闭合。

如果 WOW 没有定义，那么你很可能没有包含 wow.js - 确保你有正确的文件（查看其中内容）和正确的路径。当你卡住时 - 摆脱所有控制台错误并创建一个最小的、基本的解决方案，它应该可以工作 - 这样更不容易混淆，也更容易找到问题所在。

至于重复的脉冲动画 - 最好不要使用。在旧日子里有那些 <blink> 和 <marquee> 标签，它们已经消失了，有其原因 - 你不应该使用它。同样适用于 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>

- Maciej Jankowski

谢谢Maciej。我会告诉你这个进展如何。另外，我发布的代码是直接从开发者网站复制粘贴的，所以关闭</div>标签就是从那里来的。 - patski

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gary Riger · Accepted Answer

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

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