Question

在你说这是不可能的之前，我知道它是。这是一个例子：http://victoriabeckham.landrover.com/INT

主要问题是iOS会在滚动时冻结DOM操作，因此您必须使用某种技术来克服此问题。我希望使用的parallax插件是stellar.js，但我遇到的问题是该插件的“iOS演示”在桌面上并不真正可用。今天早上我摆弄了3个小时，无法在iOS和桌面上安装正常的设置。

我需要一些想法，要么是一种技术来配置stellar.js以同样的方式在两者上工作（我不确定这是否可行），或者是另一个可以同时工作的库，或者可能对我如何能够有所了解我自己设计一个解决方法。

感谢任何帮助。

Answer 1

第1步：像这样创建和对象

{
startFrameNumber: {
     //first obj
     id: idOfElement
     duration: howeverManyFrames
     startLeft: whatever
     endLeft: whatever
     startTop: stillWhatever
     endTop: whateverAgain
   },

   nextStartFrameNumber: {

   }
}

第2步：通过CSS使页面不可滚动，即100％高度和宽度使用和溢出：隐藏

步骤3：当用户滚动（通过自定义滚动条，键盘操作或触摸事件）时，根据它们滚动的距离或其他任何内容推进动画x帧。如果您创建的动画对象具有键[frame]，则将其添加到可见和移动的事物的队列中，并将队列中的所有内容移动到适当的位置和/或将它们从活动对象的队列中移除< / p>

就是这样。移动东西的功能应该是非常直接的，除了动画平滑将需要一点点玩。

Answer 2

只需手动滚动每一层视差效果并自行控制，而无需依赖浏览器的页面滚动。

Answer 3

我已经在Zynga Scroller js library的帮助下成功实现了跨设备/浏览器视差滚动。它会解决您的主要问题之一，即点击和触摸事件的互操作性以及在移动webkit设备上滚动 - 这允许您在滚动时操纵DOM。

然后，要创建视差效果，您有三个选择：

使用3d变换模拟真实世界的3d视差（使用控制透视和变换原点的父/包装元素）。
使用2d视差库，例如stellar.js或skrollr
构建自己的视差滚动算法。

Here's a quick demo（使用现有示例代码）显示了平滑滚动在桌面和移动设备上的平滑程度。当然，您仅限于支持3D变换的设备。请注意，Zynga Scroller通过单击/触摸和拖动工作 - 它可能不应该用作dekstop解决方案，因为CSS中唯一需要的是overflow: scroll。

Answer 4

查看jQuery-Plugin“Scroll Path”http://joelb.me/scrollpath并将其与不同的图层和速度相结合。您将认识到，示例页面的滚动不仅仅是一个垂直视差阶段，而且在您向上和向下滚动时也会水平移动图层。使用滚动路径可以实现这一点。

Answer 5

尝试一起使用http://cubiq.org/iscroll-4和stellar.js。

Answer 6

正常处理桌面的视差内容，然后添加“touchmove”事件监听器以触发滚动事件：

document.body.addEventListener('touchmove', function(){$window.scroll()}, true);

使用iOs 5.1.1在iPad 2上测试并使用

如何创建适用于iOS和桌面的视差滚动网站？

6 个答案: