自由滚动和视差问题(jQuery Scroll Path + Parallax)

时间:2014-04-21 22:38:09

标签: javascript jquery scroll parallax parallax.js

在一个项目中,我需要建造像着名的视差动力马里奥卡丁车Wii体验网站,它还带有水平和垂直滚动(如果你还没有看到它,这里是: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:对不起语法错误,我还在学习英语。

1 个答案:

答案 0 :(得分:0)

要让2个插件协同工作,您应该了解它们的工作原理。视差效果是通过几个以不同速度移动的层实现的 - 最接近你的移动最快,最远的移动速度最慢。大多数视差效果插件都基于scrollTop计算 - 即根据当前滚动偏移乘以delta值(根据图层位置而不同)移动图层。

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

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