Jquery Parallax滾動效果 - 多方向

Question

我需要為客戶端構建一個多方向的JQuery視差頁面 - 他們基本上希望它以類似的方式工作 - https://victoriabeckham.landrover.com/INT

我准備好了藝術品，並找到了許多jquery庫，可以讓我滾動水平/垂直 - 但我不知道如何在特定的坐標上將兩者結合在一起。 有誰能指出我正確的方向？

編輯：我最初在看過Superscrolarama並且認為所有問題都解決了之后做了這個帖子 - 但是我一直在努力實現它 - 我不認為它是我認為的救星，我需要水平和垂直視差以及滾動到實現以上，它似乎不支持 - 所以任何其他提示，我將非常感激！

Answer 1

我把東西扔在一起對你來說是個好主意。

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

該腳本首先初始化所有對象的起始位置。 然后為箭頭鍵和鼠標滾輪設置處理程序。 之后是parallaxScroll函數中算法的核心。

它使用ARROWS或MOUSEWHEEL進行滾動。

來自[左，右，頂部，底部]過渡。

HTML和CSS非常簡單。

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

這是一個有趣的效果，似乎適合藝術類型的網站。

Answer 2

你有沒有看過像Scrollrama這樣的圖書館http://johnpolacek.github.com/scrollorama/或Curtain http://curtain.victorcoulon.fr/ ？

我知道在你的問題中你提到你已經看過不同的圖書館但是根據它們的工作方式，很難真正建議如何使用正確的坐標。

* edit1

如果你還沒有看到它，那么scrolllorama的作者也會做一個超級卷曲，這會給動畫帶來更多的控制，例如當一個元素固定時動畫。

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

Answer 3

smashinghub.com上的這篇文章展示了一個用於滾動和視差效果的JQuery插件集合，我完全相信其中一個會幫助你。 它看起來像jQuery Scroll Path是最先進的或適合您的要求。

Answer 4

我意識到我在這里跳得很晚，這看起來非常明顯，但你是否嘗試過對他們在https://victoriabeckham.landrover.com/INT上所做的逆向工程？ 看起來ScrollAnimator腳本完成了大部分工作。 我會在本地下載他們的網站和亂七八糟的東西，減去部分，直到我弄清楚哪些組件提供了哪些功能。 然后我會通讀那些了解它們是如何實現的。

Answer 5

你有使用scrollpath插件

make path