Javascript Jquery 视差滚动效果 - 多向
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12461710/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery Parallax Scrolling effect - Multi directional
提问by Dancer
I need to build a multi-directional JQuery parallax page for a client - they basically want it to work in a similar way to this - https://victoriabeckham.landrover.com/INT
我需要为客户端构建一个多向 JQuery 视差页面 - 他们基本上希望它以与此类似的方式工作 - https://victoriabeckham.landrover.com/INT
I have the artwork ready and have found many jquery libraries that will allow me to scroll horiz/vertical - but i'm not sure how to combine both together at a specific co-ordinate. Could anyone please point me in a the right direction?
我已经准备好了艺术品，并且发现了许多 jquery 库，它们可以让我滚动水平/垂直 - 但我不确定如何在特定坐标处将两者结合在一起。任何人都可以指出我正确的方向吗？
Edit: I did originally sign this post off having looked into Superscrolarama and thinking all was solved - but having struggled with implementing it - I dont think its quite the saviour I thought it was, I need both horizontal and vertical parallax as well as scrolling to achieve above, which it doesn't seem to support - so any other tips I'd be very grateful for!
编辑：我最初确实在研究 Superscrolarama 并认为一切都已解决后签署了这篇文章 - 但一直在努力实现它 - 我不认为它是我认为的救世主，我需要水平和垂直视差以及滚动到实现上述目标，它似乎不支持 - 所以我将非常感谢任何其他提示！
回答by Louis Ricci
I threw something together is jsfiddle for you.
我把一些东西放在一起对你来说是jsfiddle。
The script initializes the start positions of all of the objects first. Then handlers are set up for arrow key and mouse wheel. After that is the meat of the algorithm in the parallaxScroll function.
该脚本首先初始化所有对象的起始位置。然后为箭头键和鼠标滚轮设置处理程序。之后是 parallaxScroll 函数中算法的核心。
It uses the ARROWS or MOUSEWHEEL for scrolling.
它使用箭头或鼠标轮进行滚动。
There are from [left, right, top, bottom] transitions.
有从 [left, right, top, bottom] 过渡。
The HTML and CSS are really simple.
HTML 和 CSS 非常简单。
The JS/jQuery that runs it is self explanatory.
运行它的 JS/jQuery 是不言自明的。
It's an interesting effect, that seems to be geared for artsy type sites.
这是一个有趣的效果，似乎适合艺术类型的网站。
回答by NicMagnier
Did you look into librairies like Scrollrama http://johnpolacek.github.com/scrollorama/or Curtain http://curtain.victorcoulon.fr/?
您是否研究过像 Scrollrama http://johnpolacek.github.com/scrollorama/或 Curtain http://curtain.victorcoulon.fr/这样的图书馆？
I know in your question you mention that you already looked into different librairies but depending how they work it's difficult to really suggest how to use proper coordinates.
我知道在你的问题中你提到你已经研究了不同的图书馆，但根据它们的工作方式，很难真正建议如何使用正确的坐标。
*edit1
*编辑 1
If you didn't see it yet, the auther of scrollorama also did superscrollorama which give a bit more controler over the animation for example animation when an element is pinned.
如果您还没有看到它，scrollorama 的作者也做了 superscrollorama，它可以对动画进行更多的控制，例如固定元素时的动画。
回答by Ma Jerez
This article in smashinghub.comshows a collection of JQuery plugin for scrolling and parallax effect I'm totally sure one of them will help you. it looks like jQuery Scroll Pathis the most advanced of them or suit your requirements.
smashinghub.com 上的这篇文章展示了一组用于滚动和视差效果的 JQuery 插件，我完全确定其中一个会对您有所帮助。看起来jQuery Scroll Path是其中最先进的或适合您的要求。
回答by Kale McNaney
I realize I'm jumping in late here, and this might seem ultra obvious, but have you tried reverse engineering what they have done on https://victoriabeckham.landrover.com/INT? It looks like the ScrollAnimator scriptdoes a bulk of the work. I would download their site & mess with it locally, subtracting parts until I figured out which components provide which pieces of functionality. Then I would read through those to understand how they made it happen.
我意识到我在这里迟到了，这似乎非常明显，但是您是否尝试过对他们在https://victoriabeckham.landrover.com/INT 上所做的进行逆向工程？看起来ScrollAnimator 脚本完成了大部分工作。我会下载他们的网站并在本地处理它，减去部分，直到我弄清楚哪些组件提供哪些功能。然后我会通读这些内容以了解它们是如何实现的。
