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

Question

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

Answer 1

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

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

• http://one-potato.co.uk

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

基本思想是编写一个滚动容器，它接受触摸输入并跟踪您的内容的 x 和 y 位置(如果您需要二维)。为了使这种视差可用，我们发现最好的方法是使用委托(delegate)给某种 Controller 。我不看就记不起我们使用的确切语法

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);

这种委托(delegate)模式深受 UIKit 的影响，因为我觉得它提供了一种更清晰的方式来通知系统的不同部分其他事件。我发现使用过多的事件调度变得难以维护，但这完全是另一回事。

希望对您有所帮助。