问题标签 [inview]

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 投票
2 回答
11535 浏览

javascript - 不断运行一个函数

我正在使用出色的inView插件来检查元素是否在视口中可见,使用 setInterval,但该函数仅运行一次,并且仅在元素可见时才运行,否则(应运行 else 语句)。

0 投票
1 回答
1012 浏览

jquery - 滚动时css动画添加类(一个寻呼机)

我试图animate.css在页面滚动时触发事件(一个寻呼机)。

基本上我需要 jquery 将示例类添加到视图中具有示例类.animate的每个visible元素.anim


附加点:如果有办法将 data-delay 属性添加到我的 html 中,以便 jquery 延迟解析它

例如你好

0 投票
1 回答
201 浏览

jquery - 使用 2 个 $(Window).scroll 脚本

我正在使用 2 个依赖于 $(window).scroll 函数的脚本。一种是用于视差图像的 imagescroll.js,另一种是用于 css3 动画的 inview.js,而元素在视口中。两个脚本如下

Inview.js

视差脚本来自以下链接

http://www.jqueryscript.net/demo/Simple-Spotify-Like-jQuery-Image-Parallax-Effect-Plugin-Parallax-ImageScroll/demo/

现在的问题是,由于这两个脚本都在使用 $(window).scroll,因此视差已停止工作,并且出现了空白而不是图像。您可以在以下链接中看到工作 HTML

http://bit.ly/1gUmHwj

请让我知道我该如何克服这个问题。

提前致谢!

0 投票
0 回答
40 浏览

jquery - 添加到松弛视差插件

我目前正在尝试为我正在开发的网站上的一些元素添加一些不错的视差效果。

我找到了一个名为 Laxicity ( http://www.gougouzian.fr/projects/jquery/laxicity/ ) 的插件,它可以满足我在视差选项/效果方面的所有需求。

然而,我遇到的一个问题是,在长页面上,视差效果发生在元素出现之前。

我想要做的是在应用视差效果之前添加一些额外的功能来检查元素是否在视图中。

如果有人能指出我正确的方向,那就太好了。

谢谢。

安德鲁

0 投票
1 回答
103 浏览

javascript - 清除间隔不起作用

我正在研究一个相当奇怪和复杂的功能。这个想法是有一个运行滑块的计时器。当滑块悬停时(即滑块停止移动),此计时器将被清除。我还希望在滑块(或者更确切地说,它的父容器)不在视线范围内时清除计时器。使用插件 inview,我可以检查元素是否在视口中。所以当我看到父元素不再在视口中时,我清除了计时器。但是,这不起作用,我不知道为什么。在悬停时清除计时器确实有效。这是一个小提琴

不工作的部分:

如您所见,事件记录在控制台中,因此它们被触发,但滑块不会停止(如您在控制台中看到的:类仍然分配并删除到 .twitter 内的 .articles。这意味着计时器没有清除。但为什么不呢?我想不通。定时器是全局设置的,所以这应该不是问题。

编辑:哦,显然在悬停时清除计时器也不起作用......这很奇怪,因为所有的 console.logs 都可以工作。ANDtimer设置为全局变量。

0 投票
1 回答
478 浏览

jquery - 无法使用 RequireJS 加载 inview jQuery 插件

我正在尝试在我的应用程序中使用 inview 插件,该插件使用 RequireJS 加载脚本并正在使用 Almond 构建/优化。我收到控制台错误:

这似乎来自需要添加到 inview 文件末尾的垫片:

我的要求配置如下:

非常感谢任何帮助!

0 投票
2 回答
2552 浏览

javascript - 如何绑定到多个元素上的“inview”事件

我正在玩 Velocity.js 和 jquery.inview,我希望页面上的所有标题在它们进入视图时都可以滑动。此代码适用于第一个标题:

如果我多次复制并粘贴以上内容并替换.movies-title为其他标题的类,它可以按我的意愿工作。

但是,这似乎是很多额外的代码。我尝试更改$('.movies-title')为,$(.movies-title, .tv-title, .books-title)但动画仅适用于列表中的最后一个元素。我还尝试添加一个名为.title所有标题的新类并更改.movie-title为,.title但这也不起作用。

我究竟做错了什么?如何压缩代码?

0 投票
2 回答
3242 浏览

javascript - 如何使用 Waypoints.js 在滚动时触发动画

我一直在试图弄清楚如何在滚动时触发动画,但我不太明白。基本上,我想要一个可以添加到标题中的类,该类将在具有该类的元素滚动到视图中时触发动画。

我尝试使用 jQuery Inview插件,但我无法让它做我想做的事。然后我切换到Waypoints.js并且我有点让它工作,但它并不完美。现在,当我第一次滚动到它们时,这些元素会动画,但是当我向上和向下滚动页面时它们什么都不做。动画只触发一次。

以下是我当前的代码。如果有人能帮我想出一种方法来让每次用户滚动经过它们时触发动画——以及一种压缩代码以便它基于类而不是 ID 触发的方法——那将非常棒。(现在,我对每个元素都有单独的功能。)

PS:我正在使用animate.csswow.jstextillate.js来制作动画。

HTML

jQuery

谢谢你的帮助!

编辑:我找到了一个部分解决方案,每次滚动它们时都会触发动画。但是,我似乎只能让它与ids. 我宁愿能够针对 aclass而不是必须为每个新标题编写一个单独的函数。关于如何修改以下代码以使其适用于一类的任何想法.lettering

0 投票
1 回答
588 浏览

jquery - Jquery inview将类添加到最后一个元素

我正在尝试使用 jquery inview 插件将类添加到视口中的元素。出于某种原因,插件仅将类添加到最后一个元素,即使其他元素在视口中清晰可见。下面是我的代码:

html:

jQuery:

0 投票
2 回答
124 浏览

jquery - 我的变量值发生了变化,如何相应地更新我的函数?

一个多星期以来我一直有这个问题,这让我发疯了。我不是一个“代码”类的人,尽管我设法走到了这一步,但我真的达到了我的极限。我希望有人可以帮助我解决我的问题。

所以,这是我的问题:我正在使用三个插件:Flexslider、Inviewevent ( https://remysharp.com/2009/01/26/element-in-view-event-plugin ) 和 Scrollify。我的网站分为几个部分,每个部分都是全屏的,并且由于滚动插件及其航点系统,每次用户滚动或使用键盘时,网站都会自动滚动到下一个航点并带有幻灯片动画。由于每个部分都是全屏的,因此我停用了滚动条。我正在使用 Flexslider,因为我试图让用户垂直和水平滚动。为了给你一个想法,我受到这个网站的极大启发,并且基本上试图实现同样的目标:http ://www.kunstler.it/ 。

现在,Flexslider 插件有一个名为“键盘”的选项。这是一个布尔值。如果“真”,用户可以使用他的键盘上的箭头从一张幻灯片转到另一张幻灯片。我的问题是,即使不在视线范围内(当我在网站的不同部分时),滑块仍在注册键盘输入,这让我很困扰。我不希望用户在看不见时能够操纵滑块。所以我使用插件 Inviewevent 来做一个条件:如果滑块在视图中,那么键盘工作,如果没有,那么它就不起作用。我也会为移动设备上的触摸滑动功能做同样的事情,但由于插件也为此提供了一个选项,所以我现在专注于键盘,因为它应该基本上是一样的。

这是我的jQuery:

});

就是这样了。对于我所关心的人来说,这可能是一种完全不同的方法,而且无论如何,我能走到这一步已经是一个奇迹。我很确定我所做的某些事情不符合人体工程学或不推荐,所以如果您愿意,请不要犹豫纠正它。我也想为我的不清晰、我的词汇/拼写错误和最终的奇怪句子道歉:英语不是我的母语。还要记住,我不擅长编码。HTML 和 CSS 是小菜一碟,但 javascript 并不是我真正的朋友,即使我了解它的理论。最后一件事,我想将链接添加到我使用的所有插件,但我不能发布超过 2 个链接,因为我还没有足够的声誉。我保留 Inviewevent 只是因为它最难找到,其余的可以通过 google 轻松访问。我真的很抱歉。

就是这样...如果您有任何问题或需要我准确说明任何问题,我显然可以。不要担心你的英语:我理解它比我写的要好。最后; 如果您决定使用技术,请尝试向我解释,因为我不想只是复制/粘贴,但我想学习和提高自己。提前谢谢你,诚挚的,一些傻眼的家伙:)