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

问题描述：

今天，我看到了最令人惊叹的ipad应用程序，它使用html5，css3和javascript编写......应用程序的最佳部分是它们完美地创建了视差滚动条。 ..我的问题是...怎么做？...我找不到任何文档可以在iOS上创建视差滚动设计...如果有人可以给我一个链接或任何建议如何做到这一点将不胜感激...任何人？...亲切的问候J如何在iOS设备上构建视差滚动

答

我也在考虑这样做。 Mark Dalgeish检查stellar.js。它在大多数情况下都很有用。如果任何人有任何其他链接或信息，它会很高兴听到。

http://markdalgleish.com/projects/stellar.js/demos/ios.html

它采用滚动性。我希望能像stellar.js那样以scrollarama的方式在iPad上工作。那就是梦想！

希望这可以帮助您的搜索。

的定制版本下面是另一个不同的演示马克的说的好：http://markdalgleish.com/examples/mobileparallax/ – 2014-06-18 07:08:10

答

此刻，这是不可能在iOS设备上。 iOS设备在滚动过程中冻结DOM操作，在滚动完成时排队它们以应用。所以你最好会得到矮胖的动画。不要打扰。

答

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

和网站本身，如果你有一台iPad玩搭配：

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

希望这会有所帮助。

我喜欢你的土豆页面和它的作品相当顺利。我正在尝试将[stellar.js]（http://markdalgleish.com/projects/stellar.js/）与[可滚动性]（https://github.com/joehewitt/scrollability）结合使用，但它工作但不真的很顺利，有一些更大的PNG。如果您可以向我们展示一些详细的解释/教程/您将如何顺利地构建此应用程序，我将不胜感激。感谢和问候伊夫 – Yves 2012-09-09 20:32:46

不幸的是，现场链接现在似乎... ...-( – 2014-06-18 07:02:07

）是的，我不知道公司发生了什么事情，你仍然应该能够看到对aerian.com链接的影响。 – Tom 2014-06-18 13:40:40

答

这个网站展示了如何视差风格的影响可以在iOS https://victoriabeckham.landrover.com/INT

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

最重要的是，他们正在使用动画循环来让所有的东西都移动。他们利用window.requestAnimationFrame方法来优化页面中的更改，以便在iPad和浏览器中顺利运行。下面是它的说明页：

http://paulirish.com/2011/requestanimationframe-for-smart-animating/ 浏览器可以优化当前的动画一起到一个单一的回流和重绘循环，从而导致更高的保真度动画。例如，对于示例，基于JS的动画与CSS转换或SVIL SMIL同步。此外，如果您在不可见的选项卡中运行动画循环，则浏览器将无法保持运行状态，这意味着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设备相关联的视差限制。

不幸的是，landrover.com链接现在似乎已关闭。 :-( – 2014-06-18 07:02:38

答

马克Dalgleish谁发展stellar.js真的很好解释how to achieve this using iScroll.js to simulate an iOS scroll（YouTube视频）。

虽然只有链接的答案才是有效的，但最好总结内容（并包括链接） - 然后，如果链接中断，答案仍然有效。 – mnel 2012-10-22 22:41:17

Mark的博客文章可能涵盖了更多细节比这个视频：http://markdalgleish.com/2012/10/mobile-parallax-with-stellar-js/ – 2014-06-18 07:13:25

答

我最近检查了Skrollr：http://prinzhorn.github.com/skrollr/

的例子在iOS和桌面的伟大工程！

好发现！我迫不及待地尝试这一个出来...似乎像iOS基于Web的视差滚动是很难实现的 – 2013-01-21 18:36:39

哇，几乎所有我寻找的东西感谢分享我的朋友 – CalZone 2013-11-25 15:33:41

我不会说它在iOS上的“优秀”我的iPad 4可以滚动它，但它有点迟缓并且绝对不是标准网页的“黄油平滑”滚动。 – 2014-06-18 06:56:48

答

我发现这个网站有一篇关于在ios中工作很好的视差的文章。但是，那只支持触摸设备。如果有人能够在台式机和ios设备上工作，这将会非常棒。 http://torontographic.wordpress.com/2012/08/11/so-you-want-parallax-scrolling-in-ios-ipad-and-ipod/

只是注意到问题是要求链接 - 不是真的适合这个网站，但是然后... :-) – kleopatra 2013-11-13 10:43:26

答

看看这个网站：http://www.shindiristudio.com/demo/?item=Portal_Wordpress

它可能给你是如何做的一些见解。

答

One Million Square Feet of Culture在Windows Phone，带触摸屏的Windows，标准滚动桌面，Android和iOS上都很有魅力。

他们有这个parallax scrolling library

我看不到任何使用的视差在thei上r网站... – 2014-06-18 07:09:16

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

相关推荐