17

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

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

我需要一些想法，要么是一种将 stellar.js 配置为在两者上以相同方式工作的技术（我不确定这是否可能），要么是另一个同时适用于两者的库，或者可能对我如何编程解决方法有所了解我。

任何帮助表示赞赏。

4

6 回答 6

11

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

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

   nextStartFrameNumber: {

   }
}

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

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

而已。移动物体的功能应该非常简单，除了让动画平滑需要一点时间。

于 2012-06-20T16:04:43.953 回答
2

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

于 2012-06-20T14:48:36.503 回答
1

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

于 2012-06-27T12:22:28.440 回答
1

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

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

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

这是选项 1 的快速演示（使用现有示例代码），展示了在桌面和移动设备上的平滑视差滚动效果。当然，您仅限于支持 3d 转换的设备。请注意，Zynga Scroller 通过单击/触摸和拖动来工作——它可能不应该用作桌面解决方案，因为唯一需要的就是overflow: scrollCSS。

于 2012-06-26T18:47:22.640 回答
0

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

于 2012-06-24T17:52:19.567 回答
0

正常为桌面做视差处理，然后添加一个“touchmove”事件监听器来触发滚动事件：

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

经过 iOs 5.1.1 测试并在 iPad 2 上运行

于 2012-12-04T16:26:25.280 回答