在你说这不可能之前,我知道这是可能的。下面是一个例子:http://victoriabeckham.landrover.com/INT
主要的问题是iOS冻结了滚动上的DOM操作,所以您必须使用某种技术来克服这个问题。我希望使用的视差插件是stellar.js,但我遇到的问题是该插件的"iOS演示“在桌面上不能真正使用。我今天早上花了3个小时摆弄它,我无法得到一个在iOS和桌面上都能正常工作的设置。
我需要一些想法,要么是一种技术,可以将stellar.js配置为在两者上都以相同的方式工作(我不确定这是否可能),要么是另一个可以同时在两者上工作的库,或者可能是一些关于如何自己编写变通方法的见解。
任何帮助都是非常感谢的。
发布于 2012-06-21 00:04:44
第1步:像这样创建和对象
{
startFrameNumber: {
//first obj
id: idOfElement
duration: howeverManyFrames
startLeft: whatever
endLeft: whatever
startTop: stillWhatever
endTop: whateverAgain
},
nextStartFrameNumber: {
}
}
步骤2:通过CSS使页面不能滚动,即100%的高度和宽度和overflow: hidden
第3步:当用户滚动(通过自定义滚动条、键盘操作或触摸事件)时,根据滚动的距离或其他方式前进动画x帧。如果您创建的动画对象具有关键帧,则将其添加到可见和正在移动的事物队列中,并将队列中的所有这些事物移动到其适当的位置和/或将它们从活动对象队列中移除
就这样。移动物体的函数应该是非常直接的,除了让动画流畅需要一些时间。
发布于 2012-06-20 22:48:37
只需手动滚动每一层视差效果,并自己控制它们,而不依赖于浏览器的页面滚动。
发布于 2012-06-27 20:22:28
看看jQuery-Plugin的“滚动路径”http://joelb.me/scrollpath,并将其与不同的层和速度结合起来。您将认识到,示例页面的滚动不仅仅是垂直视差阶段,还可以在上下滚动时水平移动层。这可以通过滚动路径来实现。
https://stackoverflow.com/questions/11053917
复制相似问题