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

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

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

以及网站本身（如果您有 iPad 可以玩）：

• http://one-potato.co.uk http://web.archive.org/web/20130904185225/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);
});

然后在控制器中，像这样：

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 的影响，因为我认为它提供了一种更清晰的方式来向系统的不同部分通知另一个事件。我发现使用太多的事件调度变得很难维护，但这完全是另一个故事了。

希望这个对你有帮助。