如何在iOS设备上构建视差滚动 [英] How to build parallax scroll on an iOS device

问题描述

今天我看到了最让我放心的ipad应用程序是使用html5，css3和javascript编写的...应用程序的最佳部分是他们完美地创建了一个视差滚动...我的问题是...如何？...我找不到任何关于它可以在iOS设备上创建视差滚动的文档......如果有人可以给我一个链接或任何关于如何做到这一点的建议，那将是最受欢迎的......任何人？ ...亲切的问候J

Today I saw the most amazing ipad app that I was assured was written using html5, css3 and javascript... the best part of the app was they had perfectly created a parallax scroll... My question is... how?... I can not find any documentation on it being possible to create a parallax scroll on iOS devises... if someone could give me a link or any advise on how to do this that would be most appreciated... anyone?... kind regards J

推荐答案

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

We recently released a site which does parallax scrolling on iPad. There is a bit of an explanation, and a video of it in use here: http://www.aerian.com/portfolio/one-potato/one-potato-html5-website

以及网站本身你有一个iPad可以玩：

and the site itself if you have an iPad to play with:

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

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

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

To do this, we have written some JavaScript library code which we are looking to open-source in the near future.

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

The basic idea is to write a scroll container that accepts touch input and tracks your x and y positions (if you need two dimensions) of your content. To make this parallax-able, we found the best way is to use delegation to a controller of sorts. I can't remember the exact syntax we used without looking

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中，这样的事情：

Then in the Controller, something like this:

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

This delegate pattern is heavily influenced by UIKit as I feel it provides a cleaner way of informing disparate parts of a system of another's events. I find using too much event dispatching becomes hard to maintain, but that's anther story altogether.

希望这有点帮助。

这篇关于如何在iOS设备上构建视差滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！