fullPage.js视差滚动幻灯片

时间:2014-07-09 07:23:55

标签: parallax fullpage.js

滚动时有什么办法可以达到“视差”效果。

我正在使用 this

或者可能是任何不同的脚本来实现整页滚动(带导航)和视差效果。

提前致谢。

编辑: 我真正想要做的就是这种效果 - here

1 个答案:

答案 0 :(得分:1)

2017年3月更新

现在有Parallax fullPage.js extension提供了这样的效果。

2014年11月更新

<小时/> 现在,fullPage.js提供了一个新选项scrollBar,当设置为true时,允许fullPage.js与任何视差插件以及使用scrollTop位置作为参考的任何其他插件一起使用对于他们的影响。

这是因为当使用scrollBar:true时,fullpage.js实际上是通过使用应用于浏览器滚动的jQuery方法scrollTo滚动网站。

有一个例子here


原始答案

有一种方法,请在fullpage.js问题论坛中查看此主题: https://github.com/alvarotrigo/fullPage.js/issues/203

这里有一个使用fullpage.js的网站,其中包含一些paralax效果: http://www.saltaboombox.com.ar/

考虑到fullpage.js没有触发scroll事件,它不会滚动,而是更改fullpage包装器的toptranslate3d属性。< / p>