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

今天我看到了我确信的最令人惊叹的ipad应用程序，它是使用html5、css3和javascript编写的。。。该应用程序最好的部分是他们完美地创建了一个视差卷轴。。。我的问题是。。。怎样？。。。我找不到任何可以在iOS设备上创建视差卷轴的文档。。。如果有人能给我一个链接或任何建议如何做到这一点，将不胜感激。。。任何人我也在考虑这样做。查看MarkDalgeish的stellar.js。它在大多数情况下都非常有效。如果有人有任何其他链接或信息，这将是伟大的听到

它使用可滚动性。我希望scrollarama能像stellar.js一样在iPad上工作。这就是梦想

---

希望这有助于您的搜索。

目前，这在iOS设备上是不可能的。iOS设备在滚动期间冻结DOM操作，将其排队以在滚动完成时应用。因此，您最多只能获得大块的动画。不用麻烦。

我们最近发布了一个在iPad上进行视差滚动的网站。这里有一点解释，还有一段视频正在使用：

如果你有一台iPad可以玩的话，还有网站本身：

为此，我们编写了一些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);
});

这种委托模式深受UIKit的影响，因为我觉得它提供了一种更干净的方式，可以将另一个事件通知系统的不同部分。我发现使用太多的事件调度变得很难维护，但这完全是另一回事

---

希望这能有所帮助。

这个网站展示了一个很好的例子，说明了视差风格的效果是如何在iOs上工作的

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

最重要的是，他们正在使用动画循环，使一切移动。他们正在利用window.requestAnimationFrame方法来优化页面中的更改，以便在iPad和浏览器中顺利运行。以下是一个页面，其中包含对它的描述：

浏览器可以将并发动画一起优化为单个动画 回流和重新绘制循环，导致更高的逼真度动画。对于 例如，与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设备相关的视差限制。

Mark Dalgleish开发的explained really well（YouTube视频）。

我最近查看了Skroller：

---

这个例子在iOs和桌面上都很好用

我发现这个网站上有一篇关于视差的文章，它在ios中非常有效。但是，这只支持触摸设备。这将是伟大的，如果任何人结合起来，使其工作在桌面和ios设备

我喜欢你的土豆页，它很光滑。我试着使用组合式，但在一些更大的PNG上效果不太好。如果你能给我们一点详细的解释/教程/你是如何如此顺利地构建的，我将不胜感激。感谢并问候Yves不幸的是，实时链接现在显示为关闭…：-（是的，我不确定该公司发生了什么。你应该仍然能够看到对aerian.com链接的影响。aerian.com链接现在执行302重定向到主页：（.虽然只有链接的答案才有效，但最好总结内容（包括链接）--然后，如果链接断开，答案仍然有效。马克的博客文章可能比这段视频更详细地介绍了它：很好的发现！我迫不及待地想试试这一个……似乎基于iOS网络的视差卷轴是出了名的难以实现。哇。我想要的几乎都是。谢谢你分享我的朋友。我不会说它“很棒”在iOS上。我的iPad 4可以滚动，但有点滞后，而且绝对不是标准网页的“黄油平滑”滚动。刚刚注意到问题是要求链接-不太适合此网站，但随后…：-）该网页上的演示链接断开。不幸的是，landrover.com链接现在似乎已断开-（这是马克的另一个不同的演示，很好：

{
    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
            }
        }
    ]
},