javascript 如何制作适用于 iOS 和桌面的视差滚动网站？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11053917/
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
How can I make a parallax scrolling site that works on iOS and desktop?
提问by Jo Sprague
Before you say this isn't possible, I know it is. Here's an example: http://victoriabeckham.landrover.com/INT
在你说这是不可能的之前，我知道它是。这是一个例子：http: //victoriabeckham.landrover.com/INT
The main problem is that iOS freezes DOM manipulation on scroll, so you have to use some sort of technique to overcome the problem. The parallax plugin I was hoping to use is stellar.js, but the issue I am running into is that the "iOS demo" for that plugin isn't really usable on a desktop. I fiddled with it for 3 hours this morning, and couldn't get a setup that works correctly on both iOS and desktop.
主要问题是 iOS 在滚动时冻结 DOM 操作，因此您必须使用某种技术来克服该问题。我希望使用的视差插件是 stellar.js，但我遇到的问题是该插件的“iOS 演示”在桌面上并不真正可用。我今天早上摆弄了 3 个小时，但无法获得在 iOS 和桌面上都能正常工作的设置。
I need some ideas, either a technique to configure stellar.js to work the same way on both (I'm not sure if that's possible), or another library that works on both, or maybe some insight on how I could program a workaround myself.
我需要一些想法，要么是一种将 stellar.js 配置为在两者上以相同方式工作的技术（我不确定这是否可行），要么是另一个适用于两者的库，或者可能是关于如何编写解决方法的一些见解我。
Any help is appreciated.
任何帮助表示赞赏。
回答by hobberwickey
Step 1: Create and object like this
第 1 步：像这样创建和对象
{
startFrameNumber: {
//first obj
id: idOfElement
duration: howeverManyFrames
startLeft: whatever
endLeft: whatever
startTop: stillWhatever
endTop: whateverAgain
},
nextStartFrameNumber: {
}
}
Step 2: Make the page unscrollable via CSS, ie 100% height and width with and overflow: hidden
第 2 步：通过 CSS 使页面不可滚动，即 100% 高度和宽度 with 和 overflow: hidden
Step 3: When the user scrolls (via custom scrollbar, keyboard action, or touch events) advance the animation x frames based on how far they scrolled or whatever. If your animation object you created has a key [frame] then add that to the queue of things that are visible and moving, and move all those things in the queue to their appropriate places and/or remove them from the queue of active objects
第 3 步：当用户滚动（通过自定义滚动条、键盘操作或触摸事件）时，根据他们滚动的距离或其他方式将动画推进 x 帧。如果您创建的动画对象有一个关键 [帧]，则将其添加到可见和移动的事物队列中，并将队列中的所有事物移动到适当的位置和/或将它们从活动对象队列中删除
That's it. The function for moving things around should be pretty straight forward, except getting the animations smooth will take a little playing around with.
而已。移动物体的功能应该非常简单，除了让动画流畅需要一点时间。
回答by Oleg V. Volkov
Simply scroll each layer of parallax effect manually and control them yourself without relying on browser's page scrolling.
只需手动滚动每一层视差效果并自行控制，无需依赖浏览器的页面滚动。
回答by Danny Garcia
I've successfully implemented cross device/browser parallax scrolling with the help of the Zynga Scroller js library. It takes care of one of your main concerns which is the interoperability of click and touch events and scrolling on mobile webkit devices –?this allows you to manipulate the DOM as you scroll.
我已经在Zynga Scroller js 库的帮助下成功实现了跨设备/浏览器视差滚动。它处理您的主要关注点之一，即单击和触摸事件以及移动 webkit 设备上滚动的互操作性——这允许您在滚动时操作 DOM。
Then, to create the parallax effect you have three options:
然后，要创建视差效果，您有三个选择：
- Simulating a real-world 3d parallax by using 3d transforms (with a parent/wrapper element that controls perspective and transform origin).
- Using a 2d parallax library such as stellar.js or skrollr
- Building your own parallax scrolling algorithm.
- 通过使用 3d 变换（使用控制透视和变换原点的父/包装元素）模拟真实世界的 3d 视差。
- 使用 2d 视差库，例如 stellar.js 或skrollr
- 构建您自己的视差滚动算法。
Here's a quick demo(using existing sample code) of option 1 showing how smooth parallax scrolling would work across desktop and mobile devices. Of course, you're limited to devices that have support for 3d transforms. Note that the Zynga Scroller works via click/touch and drag –?it should probably not be used as a dekstop solution as the only thing that would be required is overflow: scrollin CSS.
这是选项 1的快速演示（使用现有示例代码），显示平滑视差滚动在桌面和移动设备上的工作方式。当然，您仅限于支持 3d 转换的设备。请注意，Zynga Scroller 通过单击/触摸和拖动工作——它可能不应该用作桌面解决方案，因为唯一需要的是overflow: scrollCSS。
回答by ToniTornado
Have a look at the jQuery-Plugin "Scroll Path" http://joelb.me/scrollpathand combine this with different layers and speeds. You will have recognized that the scrolling of the example page is not just a vertical parallax stage but also moves layers horizontally while you scroll up and down. This is possible with Scroll Path.
查看 jQuery 插件“滚动路径” http://joelb.me/scrollpath并将其与不同的层和速度相结合。您将认识到示例页面的滚动不仅仅是垂直视差阶段，而且在您上下滚动时也会水平移动图层。这可以通过滚动路径实现。
回答by Renan Santos
Do your parallax stuff for desktop normally and then add a 'touchmove' Event Listener to fire the scroll event:
正常为桌面执行视差操作，然后添加“touchmove”事件侦听器以触发滚动事件：
document.body.addEventListener('touchmove', function(){$window.scroll()}, true);
Tested and working on iPad 2 with iOs 5.1.1
在带有 iOs 5.1.1 的 iPad 2 上测试和工作
回答by Bruno
Try using http://cubiq.org/iscroll-4and stellar.js together.
尝试同时使用http://cubiq.org/iscroll-4和 stellar.js。
