如何在 iOS 设备上构建视差滚动答案

【问题标题】：How to build parallax scroll on an iOS device如何在 iOS 设备上构建视差滚动
【发布时间】：2012-03-24 11:13:47
【问题描述】：

今天我看到了最令人惊叹的 ipad 应用程序，我确信它是使用 html5、css3 和 javascript 编写的...该应用程序最好的部分是他们完美地创建了一个视差滚动...我的问题是...如何?...我找不到任何有关可以在iOS设备上创建视差滚动的文档...如果有人可以给我一个链接或任何有关如何执行此操作的建议，将不胜感激...有人吗？ ...亲切的问候J

【问题讨论】：

标签： jquery iphone html

【解决方案1】：

我们最近发布了一个在 iPad 上进行视差滚动的网站。有一点解释，这里有一段使用的视频：http://www.aerian.com/portfolio/one-potato/one-potato-html5-website

如果您有 iPad 可以玩，网站本身：

http://one-potato.co.uk

为此，我们编写了一些 JavaScript 库代码，希望在不久的将来开源。

基本思想是编写一个滚动容器，它接受触摸输入并跟踪内容的 x 和 y 位置（如果需要二维）。为了使这种视差成为可能，我们发现最好的方法是使用委托给各种控制器。我不记得我们使用的确切语法而不看

container.on('touchmove', function(e) {
    //get our offset
    var offset = <some value>; //e.g. { 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 的影响，因为我觉得它提供了一种更简洁的方式来通知系统的不同部分另一个事件。我发现使用过多的事件分派变得难以维护，但这完全是另一回事。

希望这会有所帮助。

【讨论】：

我喜欢你的土豆页面，它运行起来非常流畅。我试图将stellar.js 与scrollability 结合使用，它可以工作，但对于一些较大的png 来说并不是很流畅。如果您能向我们展示一些详细的解释/教程/您如何如此顺利地构建它，我将不胜感激。谢谢和问候伊夫
不幸的是，实时链接现在出现了... :-(
是的，我不确定公司发生了什么事。您应该仍然可以在 aerian.com 链接上看到效果。
Aerian.com 链接现在执行 302 重定向到主页 :(.

【解决方案2】：

这个网站展示了一个很好的例子，说明视差样式效果如何在 iO 上工作https://victoriabeckham.landrover.com/INT

他们根据您提供的输入类型模拟滚动。您实际上并没有滚动页面，然后为各种属性设置动画。它正在读取触摸事件、鼠标滚轮或它们自定义的烘焙滚动条，并查看您想要滚动多少。页面中的所有内容都在一个容器中。这样，当您执行触摸事件时，它只会读取您在页面上的移动量。

最重要的是，他们使用动画循环来让所有东西都移动。他们正在使用 window.requestAnimationFrame 方法来优化他们页面中的更改，以便它在 iPad 和浏览器中顺利运行。这是一个带有描述的页面：

http://paulirish.com/2011/requestanimationframe-for-smart-animating/ 浏览器可以将并发动画一起优化为单个回流和重绘循环，导致更高保真度的动画。为了例如，与 CSS 过渡或 SVG 同步的基于 JS 的动画微笑。另外，如果您在不是可见，浏览器不会继续运行，这意味着更少的 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 设备相关的视差限制。

【讨论】：

不幸的是，landrover.com 链接现在似乎已关闭。 :-(

【解决方案3】：

我最近查看了 Skrollr：http://prinzhorn.github.com/skrollr/

该示例在 iO 和桌面上运行良好！

【讨论】：

不错的发现！我迫不及待想试试这个……似乎 iOS 基于 Web 的视差滚动很难实现。
哇。几乎所有我正在寻找的东西。感谢分享我的朋友。
我不会说它在 iOS 上“很棒”。我的 iPad 4 可以滚动它，但它有点滞后，而且绝对不是标准网页所具有的“黄油平滑”滚动。

【解决方案4】：

开发 stellar.js 的 Mark Dalgleish 解释得非常好 how to achieve this using iScroll.js to simulate an iOS scroll（YouTube 视频）。

【讨论】：

虽然只有链接的答案是有效的，但最好总结一下内容（并包含链接）——然后，如果链接断开，答案仍然有效。
马克的博客文章可能比这个视频更详细地介绍了它：markdalgleish.com/2012/10/mobile-parallax-with-stellar-js

【解决方案5】：

我也在考虑这样做。查看 Mark Dalgeish 的 stellar.js。它在大多数情况下都非常有效。如果有人有任何其他链接或信息，很高兴听到。

http://markdalgleish.com/projects/stellar.js/demos/ios.html

它使用可滚动性。我希望像 stellar.js 那样让 scrollarama 在 iPad 上工作。嗯，这就是梦想！

希望这对您的搜索有所帮助。

【讨论】：

这是另一个不同的 Mark 演示，很好：markdalgleish.com/examples/mobileparallax

【解决方案6】：

我发现这个网站有一篇关于视差的文章在 ios 中效果很好。但是，那只支持触摸设备。如果有人结合起来让它在桌面和 ios 设备上工作，这将是很棒的。 http://torontographic.wordpress.com/2012/08/11/so-you-want-parallax-scrolling-in-ios-ipad-and-ipod/

【讨论】：

刚刚注意到问题是在询问链接 - 不太适合这个网站，但是... :-)
该网页上的演示链接已损坏。

【解决方案7】：

目前，这在 iOS 设备上是不可能的。 iOS 设备在滚动期间冻结 DOM 操作，将它们排队以在滚动完成时应用。所以你最多会得到厚实的动画。不要打扰。

【讨论】：