免费滚动和视差问题（jQuery Scroll Path + Parallax）

Question

在一个项目中，我需要构建类似著名的视差驱动的Mario Kart Wii Experience网站，该网站还附带水平和垂直滚动条（如果您尚未看到的话，这里是： http：//www.nintendo。 com.au/gamesites/mariokartwii/#home ）

为了获得滚动效果，我抓住了JQuery Scroll Path插件（网站位于： http : //joelb.me/scrollpath/ ），它似乎满足了我有关自由滚动的需求。

当我尝试包括一些插件来产生视差效果时，问题就来了。 我尝试了几个插件（包括Stellar.js，jInvertScroll，Parallax.js，Parallax-JS），但似乎都无法正常工作。 我假设Scroll Path插件附带的自定义滚动与使用导航器滚动以使效果起作用所需的视差插件之间存在某种关系。

我在Google中搜索了类似的情况（即，使用一些视差插件实现Scroll Path），但是在当前情况下我找不到任何人，而且似乎不再维护Scroll Path插件。

任何使它工作的想法将不胜感激！

PS：抱歉语法错误，我仍在学习英语。

Answer 1

要使2个插件协同工作，您应该了解它们的工作方式。 视差效果可以通过以不同速度移动的几层来实现-距离您最近的移动最快，距离最远的移动最慢。 大多数视差效果插件都是基于scrollTop计算的-即根据当前滚动偏移量乘以delta值（取决于图层位置而有所不同）来移动图层。

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

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