在iPhone 6网站上滚动动画视频

Question

我正在尝试像landing page for the new iPhone 6一样滚动视频。我有滚动视频动画，但我试图在释放鼠标轮后如何轻松播放视频。我不确定应该如何应对这一挑战。我应该尝试使用实际的easeOut函数吗？或者我应该采取其他方式吗？

这是我目前拥有的JS的片段。还有一个实例here。

function easeOut(t, b, c, d) {
  return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
};

var $win = $(window),
    $video = $('video'),
    frameRate = 29.97,
    target = 0,
    scroll = 0,
    isTicking, scrollTimeout, delta, target;

var ScrollVideo = function() {

    this.scrollY = 0;

    $win.on('mousewheel DOMMouseScroll', this.onScroll.bind(this)); 
};

ScrollVideo.prototype = {

    /**
     * Callback for our scroll event
     * keeps track of the last scroll value
     */
    onScroll: function(event) {

        var e = event.originalEvent ? event.originalEvent : event; // get original event if available

        target += (e.wheelDelta > 0) ? -70 : 70;
        if (target < 0) target = 0;

        delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

        this.requestScrollTick();
    },

    /**
     * Calls rAF if it hasn't already
     * been done
     */
    requestScrollTick: function() {

        if( !isTicking ) {
            window.requestAnimationFrame(this.scrollHandler);
        }
        isTicking = true;
    },

    /**
     * Animate stuff on scroll
     */
    scrollHandler: function() {

        scroll += (target - scroll) * 0.1;

      console.log(scroll);

        if(delta < 0) {
            $video[0].currentTime += (1 / frameRate);
        }
        else {
            $video[0].currentTime -= (1 / frameRate);
        }

        // stop ticking
        isTicking = false;
    }
};

var scrollVideo = new ScrollVideo();

我希望能够解决这个问题，非常感谢任何帮助/方向。