首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >在使用WOW.js和与animate.css集成时遇到了严重困难

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

Stack Overflow用户
提问于 2014-10-07 04:11:05
回答 2查看 22K关注 0票数 4

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

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

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

有问题的图形是一颗心,而animate.css有一个很好的‘脉搏’位的CSS我想使用。在animate.css中,WOW.js应该表现得非常出色。但我完全迷路了。我的JS技能还很基础,所以请耐心等待。

正如WOW.js文档所述,我通过以下命令链接到它:

代码语言:javascript
运行
复制
<link rel="stylesheet" href="css/animate.css">

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

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

代码语言:javascript
运行
复制
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>

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

代码语言:javascript
运行
复制
<div class="wow">  Content to Reveal Here  </div >

然后,您应该将animate.css样式添加到元素:

代码语言:javascript
运行
复制
<div class="wow pulse">  Content to Reveal Here  </div >

但我遗漏了一些东西,因为什么都不能用。我已经在谷歌上搜索过了,我不是唯一一个对WOW.js有问题的人,但我已经尝试了所有的方法,现在我求助于你。

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

代码语言:javascript
运行
复制
wow = new WOW(
    {
    boxClass:     'wow',      // default
    animateClass: 'animated', // default
    offset:       0          // default
   }
)
wow.init();

我在想,既然这并不是那么令人惊讶,那么肯定有另一种方法让我可以做到这一点,但仍然可以使用CSS动画。

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

EN

回答 2

Stack Overflow用户

发布于 2015-02-01 02:23:45

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

代码语言:javascript
运行
复制
<script src="//cdnjs.cloudflare.com/ajax/libs/wow/0.1.12/wow.min.js"></script>
<script>new WOW().init();</script>

不需要打电话给

代码语言:javascript
运行
复制
<script src="wow.js"></script>
票数 12
EN

Stack Overflow用户

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

这里发生了几件事:

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

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

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

现在,下面的示例适用于我:

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/26224088

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档