Jquery Parallax滚动效果 – 多方向

我需要为客户端构建一个多向JQuery视差页面 – 他们基本上希望它以类似的方式工作 – https://victoriabeckham.landrover.com/INT

我已经准备好了艺术品并找到了许多jquery库,它们可以让我滚动水平/垂直 – 但我不确定如何在特定的坐标上将它们组合在一起。 有谁能指出我正确的方向?

编辑:我最初在看过Superscrolarama并且认为所有问题都已解决之后做了这个post – 但是我一直在努力实现它 – 我不认为它是我认为的救星,我需要水平和垂直视差以及滚动到实现上述,它似乎不支持 – 所以任何其他提示,我将非常感激!

我把东西扔在一起对你来说是个傻瓜。

http://jsfiddle.net/9R4hZ/40/

该脚本首先初始化所有对象的起始位置。 然后为箭头键和鼠标滚轮设置处理程序。 之后是parallaxScroll函数中算法的核心。

它使用ARROWS或MOUSEWHEEL进行滚动。

来自[left,right,top,bottom]过渡。

HTML和CSS非常简单。

运行它的JS / jQuery是不言自明的。

这是一个有趣的效果,似乎适合艺术类型的网站。

你有没有看过像Scrollrama这样的图书馆http://johnpolacek.github.com/scrollorama/或Curtain http://curtain.victorcoulon.fr/

我知道在你的问题中你提到你已经看过不同的图书馆但是根据它们的工作方式,很难真正建议如何使用正确的坐标。

* edit1

如果你还没有看到它,那么scrolllorama的作者也会做一些superscrollorama,它会给动画带来更多的控制,例如当一个元素被固定时动画。

http://johnpolacek.github.com/superscrollorama/

smashinghub.com上的这篇文章展示了一个用于滚动和视差效果的JQuery插件集合,我完全相信其中一个会帮助你。 它看起来像jQuery Scroll Path是最先进的或适合您的要求。

我意识到我在这里跳得很晚,这看起来非常明显,但你是否尝试过对他们在https://victoriabeckham.landrover.com/INT上所做的逆向工程? 看起来ScrollAnimator脚本完成了大部分工作。 我会在本地下载他们的网站并弄乱它,减去部分直到我弄清楚哪些组件提供了哪些function。 然后我会通读那些了解它们是如何实现的。

你有使用scrollpath插件

make path