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

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],则将其添加到可见和移动的事物的队列中,并将队列中的所有内容移动到适当的位置和/或将它们从活动对象的队列中移除

而已.移动东西的功能应该是非常直接的,除了动画平滑将需要一点点玩.

Answer 2

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