今天我看到了最让我放心的ipad应用程序是使用
html5,css3和javascript编写的…应用程序的最佳部分是他们完美地创建了一个视差滚动…我的问题是……怎么样？我找不到任何关于它可以在iOS设备上创建视差滚动的文档…如果有人可以给我一个链接或任何关于如何做到这一点的建议,那将是最受欢迎的…任何人？…亲切的问候J.
解决方法
我们最近发布了一个在iPad上进行视差滚动的网站.有一点解释,并在这里使用它的视频：
http://www.aerian.com/portfolio/one-potato/one-potato-html5-website
和网站本身,如果你有一个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);
});
然后在Controller中,这样的事情：
var scrollView = new ScrollView($('#container'));
var controller = {
scrollViewDidScrollToOffsetWithAnimation : function(scrollView,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',-offset.y * 0.1)');
}
}
scrollView.setDelegate(controller);
这种委托模式深受UIKit的影响,因为我觉得它提供了一种更清晰的方式来告知系统中不同部分的其他事件.我发现使用太多的事件调度变得难以维护,但这完全是另一个故事.
希望这个对你有帮助.
