让视差在 iPad 上工作答案

【问题标题】：Making Parallax work on iPad让视差在 iPad 上工作
【发布时间】：2012-07-18 16:29:05
【问题描述】：

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

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

基本上我想知道的是视差网站之间的区别。我已经看到一些使用画布标签，而其他似乎只是调整顶部和左侧值，而其他似乎正在替换图像。此外，对于 iPad 友好的 Parallax 网站来说，最好的方法是什么。

我发现在 iPad 上运行良好的 2 个网站是：

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

https://victoriabeckham.landrover.com/INT

谢谢。

【问题讨论】：

标签： jquery ipad tablet parallax

【解决方案1】：

我的回复是专门针对https://victoriabeckham.landrover.com/INT

他们根据您提供的输入类型模拟滚动。您实际上并没有滚动页面，然后为各种属性设置动画。它正在读取触摸事件、鼠标滚轮或它们自定义的烘焙滚动条，并查看您想要滚动多少。页面中的所有内容都在一个容器中。这样，当您执行触摸事件时，它只是读取您在页面上移动了多少。

除此之外，他们还使用动画循环来让一切移动。他们正在使用 window.requestAnimationFrame 方法来优化他们页面中的更改，以便它在 iPad 和浏览器中顺利运行。这是一个带有描述的页面：

http://paulirish.com/2011/requestanimationframe-for-smart-animating/ 浏览器可以将并发动画一起优化为单个回流和重绘循环，导致更高保真度的动画。为了例如，与 CSS 过渡或 SVG 同步的基于 JS 的动画微笑。另外，如果您在不是可见，浏览器不会继续运行，这意味着更少的 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 设备相关的视差限制。

【讨论】：

【解决方案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();
  }

我自己没有尝试过该代码，但我相信这就是您所需要的。我会试一试，如果这就是你所需要的，我会告诉你。

【讨论】：