Jquery Parallax滚动效果 - 多方向

时间:2012-09-17 14:43:35

标签: javascript jquery html5 css3 parallax

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

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

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

5 个答案:

答案 0 :(得分:20)

我把一些东西放在一起就是jsfiddle给你。

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

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

它使用ARROWS或MOUSEWHEEL进行滚动。

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

HTML和CSS非常简单。

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

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

答案 1 :(得分:6)

您是否研究过Scrollrama http://johnpolacek.github.com/scrollorama/或Curtain http://curtain.victorcoulon.fr/等图书馆?

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

*的 EDIT1

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

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

答案 2 :(得分:5)

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

答案 3 :(得分:1)

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

答案 4 :(得分:0)

您已使用scrollpath plugin

make path