首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何制作一个能在iOS和桌面上工作的视差滚动站点?

如何制作一个能在iOS和桌面上工作的视差滚动站点?
EN

Stack Overflow用户
提问于 2012-06-15 23:37:55
回答 5查看 19.8K关注 0票数 17

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

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

我需要一些想法,要么是一种技术,可以将stellar.js配置为在两者上都以相同的方式工作(我不确定这是否可能),要么是另一个可以同时在两者上工作的库,或者可能是一些关于如何自己编写变通方法的见解。

任何帮助都是非常感谢的。

EN

回答 5

Stack Overflow用户

发布于 2012-06-21 00:04:44

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

代码语言:javascript
复制
{
startFrameNumber: {
     //first obj
     id: idOfElement
     duration: howeverManyFrames
     startLeft: whatever
     endLeft: whatever
     startTop: stillWhatever
     endTop: whateverAgain
   },

   nextStartFrameNumber: {

   }
}

步骤2:通过CSS使页面不能滚动,即100%的高度和宽度和overflow: hidden

第3步:当用户滚动(通过自定义滚动条、键盘操作或触摸事件)时,根据滚动的距离或其他方式前进动画x帧。如果您创建的动画对象具有关键帧,则将其添加到可见和正在移动的事物队列中,并将队列中的所有这些事物移动到其适当的位置和/或将它们从活动对象队列中移除

就这样。移动物体的函数应该是非常直接的,除了让动画流畅需要一些时间。

票数 11
EN

Stack Overflow用户

发布于 2012-06-20 22:48:37

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

票数 2
EN

Stack Overflow用户

发布于 2012-06-27 20:22:28

看看jQuery-Plugin的“滚动路径”http://joelb.me/scrollpath,并将其与不同的层和速度结合起来。您将认识到,示例页面的滚动不仅仅是垂直视差阶段,还可以在上下滚动时水平移动层。这可以通过滚动路径来实现。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/11053917

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档