问题标签 [wow.js]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
3 回答
29765 浏览

javascript - 每次向上或向下滚动时,Wow.js 都会重复动画

我对 Jquery 很陌生。我希望我的 Wow.js 动画可以运行不止一次。例如:我滚动到页面底部并查看所有动画,如果我滚动回顶部,我会再次看到向下滚动时的动画。我希望我自己解释。我已经看到许多网站在他们的页面上重复动画,但不幸的是我不记得它们,我无法提供链接。

我已经尝试过这个:

但是如果你滚动一点,它也会重复动画,而且看起来很难看。我试着更好地解释我:我的动画有一个,如果它聚焦动画被触发,然后我向下滚动到另一个 div 并且前一个 div 不再可见(不在窗口视口中),然后我再次滚动回到我的带有动画的 div 并再次触发动画。

对于这个混乱的问题,我很抱歉,但我真的不知道如何解释。

提前致谢!

0 投票
1 回答
1046 浏览

javascript - 不正确的视口大小导致动画无法在滚动时执行

注意:这个问题已经解决了。查看这篇文章的底部以获取修复。

我有一个奇怪的问题,在过去的几天里我一直在拔头发。谢天谢地,我认为我已经将其隔离为一个错误的窗口/文档高度导致我的滚动动画永远不会出现的问题。我正在尝试使用animate.css中的 lightSpeedIn 动画来为 h2 标头设置动画,但是 wow.js 将简单地隐藏该元素并且即使滚动过去也不会显示它。如果我删除wow.js并仅使用Animate.css,则 h2 标题会很好地制作动画。

我已经使用以下代码进行了一些调试,我想我知道为什么 wow.js(我也尝试过使用其他滚动库但没有成功)正在破坏 - 由于某种原因 jQuery 报告窗口高度和文档高度都是943. 网站上显然有一个滚动条,所以我很确定我所做的任何滚动实现都不会工作,因为代码永远看不到要滚动到的任何内容。

将导致以下内容出现在网站上。

在此处输入图像描述

使用 wow.js 实现 - 不起作用

在这种情况下 wow.js 似乎将以下样式分配给标题,但它似乎从未被切换。

仅使用 animate.css 实现 - 有效

最奇怪的事实是,问题只发生在网站的一部分上——我让wow.js在其他部分工作得很好。一些使用萤火虫的挖掘发现动画“lightSpeedIn”在它存在时并不存在。我什至尝试从网站的其他区域(例如旧选项卡)复制和粘贴动画名称到 h2 元素中,但它总是认为动画名称不存在。

wow.js 问题 - 来自 http://bengoodwin.com.au/sputnik/ 的实时示例

我很困惑如何解决这个问题。有人对我的问题有任何见解吗?您可以在此处查看此问题的现场演示。

更新 1:我认为这可能是插件/库不兼容,所以我删除了除 animate.css 和 wow.js 之外的所有内容 - 没有解决任何问题。我完全被难住了。

更新 2:尝试使用其他滚动库。他们也不工作。将其缩小到内容对视口“不可见”的可能问题。

更新 3:找到解决方案。这非常简单 - 我在我的html,body选择器中隐藏了 overflow-x:。我删除了它,现在 wow.js 脚本可以正常工作。

0 投票
0 回答
808 浏览

javascript - Wow.js 动画隐藏元素没有填充

我安装了WOW.js(主版本)。它适用于除徽标以外的任何内容。

当我将任何过渡应用到我的网站徽标时(在导航栏内,在视口顶部),我有这种行为:

  • 照原样,它不起作用。带有 wow 类的徽标不可见,加载页面后我得到了这个 HTML。

    <span class="t2g-logo animated wow fadeInDown" style="visibility: hidden; animation-name: none;">2</span>

  • 当我放置一个 padding-top >= 0.4 em时,它按预期工作,并且在加载页面后我得到了这个 HTML。

    <span id="t2g-logo-2" class="t2g-logo wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">2</span>

我的标记很简单:

WOW 的初始化在 \ 里面是这样的:

任何帮助表示赞赏!

我创建了一个小提琴来重现它:http: //jsfiddle.net/andreav/9n74Le1t/

尝试将 padding-top 增加到 0.4em,它将开始工作。

0 投票
3 回答
1255 浏览

javascript - 移动滚动不适用于 fullpage.js 和 wow.js

我正在使用 fullpage.js 来创建我的网站,并且我正在尝试合并 wow.js 和 animate.css 来创建一些很酷的动画。在桌面上一切正常,但是当我将浏览器调整为移动大小时,我根本无法滚动。页面顶部的动画会加载,但在调整到更大的视口之前我根本无法滚动。

我已经在整页上尝试了“scrollOverflow:true”,但它不起作用。

这就是我的 app.js 的样子:

0 投票
1 回答
662 浏览

javascript - 网站上的“落后”魔兽动画

我用 wow.js/animate.css 制作了一个简单的网站,在我使用 wow.js 的页面上,动画滞后并且比我预期的要晚一点开始。如果你检查这个页面,所有的内容都可以看到大约 0.5 秒,然后动画开始。这很烦人,我该如何解决?

我尝试将内容默认设置为不可见,在页面完全加载后(document.ready),我将类更改为可见并将“哇”类添加到所需的内容中。

有趣的是,如果我使用例如fadeIn/Out 等而不是bounceIn,则没有问题。

我应该改变什么来停止页面上哇动画的“滞后”?

0 投票
1 回答
982 浏览

jquery - CSS 和菜单在 iOS 设备中不起作用 [WordPress]

我有一个 WordPress 网站。我的网站在 Mac、iPad 和 iPhone 等 iOS 设备上无法正常运行。菜单和鼠标悬停仅在 iOS 设备中无法正常工作。单击菜单导航时,我看不到菜单项。字体颜色似乎与背景相同,但单击菜单项区域时,链接有效。此外,似乎与菜单相关的 CSS 代码仅适用于 iOS 设备。

我调试了控制台错误,发现 WOW.js 不能只在 Safari 中工作。

以下是 Safari 中显示控制台错误的屏幕截图: 在此处输入图像描述

我试图通过参考在线建议的解决方案来解决这个问题,包括WOW.js 不能与 Wordpress 一起正常工作,但不能。我也尝试添加与z-index相关的CSS代码,但徒劳无功。

受影响的网站是http://me2.do/5bP7YQjD除了在 iOS 设备中,它工作正常。有什么提示可以解决这个问题吗?

谢谢。

0 投票
2 回答
149 浏览

python - 在 Flask 中使用 WOW.js

在 Flask 中滚动时,我将如何进行显示动画(例如 WOW.js)?是否可以在 python 中优雅地使用 javascript 库,或者我必须简单地将所有内容移植到烧瓶中?

0 投票
2 回答
1432 浏览

wordpress - WordPress 上的 Wow.js 在页面加载时加载一些动画,而其他则根本没有

我正在尝试在我的 WordPress 网站上使用 wow.js,并且我已经浏览了一些关于类似问题的论坛,但我似乎无法让它工作。我相信顶部的图标站点正在加载页面加载而不是滚动并在页面上进一步向下(在绿色带下)我有一个在向下滚动到它时根本不会加载的 h2。(添加了动画类,但元素被隐藏并且没有动画发生)。

我的html:

在functions.php中

提前致谢!

0 投票
0 回答
428 浏览

jquery - WOW.js 在页面重新加载时不起作用

我正在使用 WOW.js 和 skrollr 在我的网站上展示一些动画。

我有一个导航栏,370px最初位于视口的顶部,当页面向下滚动时,当导航栏的底部70px来自视口的顶部时,它保持在固定位置:

我还使用slideInLeftWOW.js 的类来滑动导航栏。

问题是当滚动条位于370px屏幕顶部并且页面重新加载时,不会出现哇动画。

谁能帮我?我究竟做错了什么?

0 投票
1 回答
923 浏览

javascript - 使用 wow.js 和 animate.css 移动(翻译)css 动画

我目前正在使用 wow.js 和 animate.css 来集成 CSS 动画(bounceUp、fadeIn 等),但如果我想使用 fadeIn 然后让图像向右平移 5em 我该怎么做?