Question

我一直在寻找和阅读很多关于视差效果的内容，我即将创建我的第一个Parallax网站。我主要担心的一个问题是如何让它在iPad上运行。我已经阅读并看到了足够的结论，Parallax在iPad上的效果不佳。

现在，在所有Parallax网站中，我发现2个似乎在iPad上运行良好，但我仍然不知道他们在做什么不同的工作，任何想法？

基本上我想知道的是Parallax网站之间有什么区别。我见过一些使用canvas标签，而其他人似乎只是调整顶部和左边的值，而其他人似乎正在替换图像。此外，iPad友好的Parallax网站的最佳方法是什么。

我发现在iPad上工作正常的2个网站是：

http://www.nike.com/jumpman23/aj2012/

https://victoriabeckham.landrover.com/INT

感谢。

Answer 1

我的回复专门针对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 2

要回答你的问题，我已经看了一下代码，我发现了这个：

  // touch
  function touchStartHandler(e) {
    //e.preventDefault();
    touchStart.x = e.touches[0].pageX;

    // Store the position of finger on swipe begin:
    touchStart.y = e.touches[0].pageY;

    // Store scroll val on swipe begin:
    scrollStart = scrollTop;
  };

  function touchEndHandler(e) {

  }

  function touchMoveHandler(e) {

    /*if (settings.freezeTouchScroll == true) {
      $('#status2').html('freezin');
      return false;
    };
    $('#status2').html('moovin');
    */

    e.preventDefault();
    offset = {};
    offset.x = touchStart.x - e.touches[0].pageX;

    // Get distance finger has moved since swipe begin:
    offset.y = touchStart.y - e.touches[0].pageY; 

    // Add finger move dist to original scroll value
    scrollTop = Math.max(0, scrollStart + offset.y);
    checkScrollExtents();
  }

我没有尝试过我自己的代码，但我相信这就是你所需要的。我会试一试，让你知道这是否是你所需要的。

使Parallax在iPad上运行

2 个答案: