如何在iOS设备上构建视差滚动
今天我看到了最让我放心的ipad应用程序是使用html5，css3和javascript编写的…应用程序的最佳部分是他们完美地创建了一个视差滚动…我的问题是……怎么样？我找不到任何关于它可以在iOS设备上创建视差滚动的文档……如果有人可以给我一个链接或任何关于如何做到这一点的建议，那将是最受欢迎的……任何人？…亲切的问候J.
我们最近发布了一个在iPad上进行视差滚动的网站。 有一点解释，并在这里使用它的video： http ： //www.aerian.com/portfolio/one-potato/one-potato-html5-website
和网站本身，如果你有一个iPad玩：
为此，我们编写了一些JavaScript库代码，我们希望在不久的将来开源。
基本思想是编写一个滚动容器，接受触摸输入并跟踪内容的x和y位置（如果需要两个维度）。 为了实现这种视差，我们发现最好的方法是使用委托给各种控制器。 我不记得我们使用的确切语法而不看
container.on('touchmove', function(e) { //get our offset var offset = ; //eg { x : 0, y : -1300 } var easing = 'ease-out'; self.delegate.scrollViewDidScrollToOffsetWithAnimation(self, offset, easing); }); 然后在Controller中，这样的事情：
var scrollView = new ScrollView($('#container')); var controller = { scrollViewDidScrollToOffsetWithAnimation : function(scrollView, offset, easing) { //here you need to respond to offset, by changing some css properties of your parallax elements: parallaxElement.css('transform', 'translate(-offset.x, -offset.y * 0.8)'); anotherParallaxElement.css('transform', 'translate(-offset.x, -offset.y * 0.1)'); } } scrollView.setDelegate(controller);
这种委托模式深受UIKit的影响，因为我觉得它提供了一种更清晰的方式来告知系统中不同部分的其他事件。 我发现使用太多的事件调度变得难以维护，但这完全是另一个故事。
希望这个对你有帮助。
该网站展示了视差风格效果如何对iOs起作用的一个很好的例子https://victoriabeckham.landrover.com/INT
他们正在模拟滚动，具体取决于您提供的输入类型。 你实际上并没有滚动页面，然后动画各种属性。 它正在读取触摸事件，鼠标滚轮或其自定义烘焙滚动条，并查看您想要滚动多少。 页面中的所有内容都在一个容器中。 这样，当您进行触摸事件时，它只是读取您在页面上移动的数量。
最重要的是，他们正在使用动画循环来使一切都移动。 他们正在使用window.requestAnimationFrame方法来优化页面中的更改，以便在iPad和浏览器中顺利运行。 这是一个描述它的页面：
http://paulirish.com/2011/requestanimationframe-for-smart-animating/浏览器可以将并发动画一起优化为单个回流和重绘周期，从而实现更高保真度的动画效果。 例如，基于JS的动画与CSS过渡或SVG SMIL同步。 此外，如果您在不可见的选项卡中运行动画循环，浏览器将无法继续运行，这意味着更少的CPU，GPU和内存使用，从而延长电池寿命。
最重要的是，他们已经构建了一个自定义关键帧对象，该对象将决定页面上所有内容的动画效果。 我在这个设置上流口水。 太糟糕了，它不是一个开放的框架。 您可以在关键帧对象中设置效果开始的位置，结束位置，缓动等，并且它们的框架将通过动画循环处理所有其余部分。
{ selector: '#outro2 > .content2', startAt: outroStart+500, endAt: outroStart+1000, onEndAnimate:function( anim ) {}, keyframes: [ { position: 0, properties: { "margin-top": 650 } }, { position: 1, ease: TWEEN.Easing.Sinusoidal.EaseOut, properties: { "margin-top": 650 } } ] },
总之，我相信自定义实现的滚动和使用requestAnimationFrame方法的自定义动画循环的组合超出了通常与iOS设备相关联的视差限制。
我最近检查了Skrollr： http ：//prinzhorn.github.com/skrollr/
该示例在iOs和桌面上运行良好！
开发stellar.js的 Mark Dalgleish非常清楚地解释了如何使用iScroll.js来模拟iOS滚动 （YouTubevideo）。
我也在考虑这样做。 查看Mark Dalgeish的stellar.js。 它在大多数情况下都能很好地工作。 如果有人有任何其他链接或信息，那将是很好听的。
http://markdalgleish.com/projects/stellar.js/demos/ios.html
它使用Scrollability。 我希望以某种方式让scrolllarama在iPad上工作，比如stellar.js。 那就是梦想！
希望这有助于您的搜索。
我发现这个网站上有一篇关于视差的文章，它在ios中很有用。 但是，那只支持触摸设备。 如果任何人结合使其在桌面设备和ios设备上都能正常工作，这将是非常棒的。 http://torontographic.wordpress.com/2012/08/11/so-you-want-parallax-scrolling-in-ios-ipad-and-ipod/
看看这个网站： http ： //www.shindiristudio.com/demo/？item = Portal_Wordpress
它可以让你了解它是如何完成的。
目前，这在iOS设备上是不可能的。 iOS设备在滚动期间冻结DOM操作，将它们排队以在滚动完成时应用。 所以你最多会得到厚重的动画。 不要打扰。
百万平方英尺文化就像Windows Phone，带触摸屏的Windows，标准滚动桌面，Android和iOS上的魅力一样。
他们有这个视差滚动库的自定义版本