如何在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位置(如果需要两个维度).为了实现这种视差,我们发现最好的方法是使用委托给各种控制器.我不记得我们使用的确切语法而不看

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

这种委托模式深受UIKit的影响,因为我觉得它提供了一种更清晰的方式来告知系统中不同部分的其他事件.我发现使用太多的事件调度变得难以维护,但这完全是另一个故事.

希望这个对你有帮助.

Answer 2

这个网站展示了视差风格效果如何对iOs起作用的一个很好的例子https://victoriabeckham.landrover.com/INT

他们正在模拟滚动,具体取决于您提供的输入类型.你实际上并没有滚动页面,然后动画各种属性.它正在读取触摸事件,鼠标滚轮或其自定义烘焙滚动条,并查看您想要滚动多少.页面中的所有内容都在容器中.这样,当您进行触摸事件时,它只是读取您在页面上移动的数量.

最重要的是,他们正在使用动画循环来使一切都移动.他们正在使用window.requestAnimationFrame方法来优化页面中的更改,以便在iPad和浏览器中顺利运行.这是一个描述它的页面:

http://paulirish.com/2011/requestanimationframe-for-smart-animating/ 浏览器可以将并发动画一起优化为单个回流和重绘周期,从而实现更高保真度的动画.例如,基于JS的动画与CSS过渡或SVG 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设备相关联的视差限制.

Answer 3

我也在考虑这样做。查看 Mark Dalgeish 的 stellar.js。它在大多数情况下都能发挥出色的作用。如果有人有任何其他链接或信息，我们很高兴听到。

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

它使用可滚动性。我希望 Scrollarama 以某种方式在 iPad 上运行，就像 stellar.js 那样。嗯，这就是梦想！

希望这对您的搜索有所帮助。