Question

我正在筹集投资组合网站。它很顺利，但是我真的很粗暴。

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

现在，我发现WOW.js应该完全符合我的要求，即。只有当用户向下滚动时，我的图形才会显示出来。但对于我的生活，我无法让它发挥作用，它应该是如此简单，风格。这样惊讶！

有问题的图形是一颗心，而animate.css有一个很棒的脉冲＆＃39;我想要使用的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 >

但是我错过了一些东西，因为没有任何工作。我已经用Google搜索了这个并且我不是唯一与WOW.js有过问题的人，但我已经尝试了所有内容，现在我转向你。

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

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

我在思考，因为这根本不是A AMAZE，我必须采用另一种方式来做到这一点，但仍然可以使用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>

Answer 2

这里发生了几件事：

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

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

2 个答案: