Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/85.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 自由滚动和视差问题(jQuery滚动路径+视差)_Javascript_Jquery_Scroll_Parallax_Parallax.js - Fatal编程技术网

Javascript 自由滚动和视差问题(jQuery滚动路径+视差)

Javascript 自由滚动和视差问题(jQuery滚动路径+视差),javascript,jquery,scroll,parallax,parallax.js,Javascript,Jquery,Scroll,Parallax,Parallax.js,在一个项目中,我需要建立一个类似于著名的视差驱动的马里奥卡丁车Wii体验网站的东西,如果你没有看到它,它还带有水平和垂直滚动,这里是: 为了实现滚动效果,我在这里抓取了JQuery滚动路径插件网站:,它似乎满足了我关于自由滚动的需求 当我尝试加入一些插件来生成视差效果时,问题就出现了。我尝试了几个插件,包括Stellar.js、jInvertScroll、Parallax.js、Parallax js,但它们似乎都不能正常工作。我假设滚动路径插件附带的自定义滚动条与视差插件使用导航器滚动条使效果

在一个项目中,我需要建立一个类似于著名的视差驱动的马里奥卡丁车Wii体验网站的东西,如果你没有看到它,它还带有水平和垂直滚动,这里是:

为了实现滚动效果,我在这里抓取了JQuery滚动路径插件网站:,它似乎满足了我关于自由滚动的需求

当我尝试加入一些插件来生成视差效果时,问题就出现了。我尝试了几个插件,包括Stellar.js、jInvertScroll、Parallax.js、Parallax js,但它们似乎都不能正常工作。我假设滚动路径插件附带的自定义滚动条与视差插件使用导航器滚动条使效果生效的需要之间存在某种关系

我在谷歌上搜索了一些类似的情况,例如,用视差插件实现了滚动路径,但我没有找到任何人符合我目前的情况,而且滚动路径插件似乎不再被维护

任何能让它工作的想法都将不胜感激


PS:抱歉语法错误,我还在学习英语。

要让两个插件一起工作,你应该了解它们是如何工作的。视差效果是通过几个以不同速度移动的层来实现的——离你最近的层移动最快,距离最远的层移动最慢。大多数视差效果插件都基于scrollTop计算,即根据当前滚动偏移乘以增量值移动层,增量值根据层位置的不同而不同

在您的情况下,您应该将jQuery ScrollPath scroll事件连接到视差插件。在ScrollPath中,您应该生成将由函数scrollToStep中的视差插件处理的滚动事件,请查看jquery.ScrollPath.js中的第490行。为了使计算更简单,您可以使用应用于滚动条的“顶部”值*一些增量,您应该自己选择增量值。然后,在视差插件中,您应该修改事件处理程序,将scroll/mousewheel中的视差效果应用于ScrollPath插件中生成的事件


要将两个插件连接在一起,您应该修改它们的代码,这意味着您将无法轻松地将这些插件更新到新版本。如果插件将来会更新,您应该对所有更改进行评论,以便重新应用它们。

我总是觉得有趣的是,在99%的情况下,一个人为自己的英语不好道歉,他们的英语是优秀的;相反地,很少有人会在他们道歉的地方发现一个问题的英语是难以理解的胡言乱语。谢谢你的回答和更新建议!我期待着修改它们,但实际上我的JavaScript知识很少。请尝试修改。如果您不能做到这一点,请准备您在JSFIDLE上所做的示例,并在这里寻求帮助。但是你应该试着先自己做;。如果没有人会帮助你,请联系我,我会尽力帮助你