苹果官网使用滚轴事件控制canvas的层级显示效果

Question

苹果官网的效果 网址：https://www.apple.com/homepod/

之前理解错误，以为是使用滚轴控制了视频的播放进度，现在搞清楚是使用canvas打印视频的每一帧，层叠在一起根据滚轴事件来控制显示。

5秒视频大概可以有100多张canvas，滚轴距离大概总共700，所以想问怎么样才能控制每一张canvas的显示与隐藏。

下面是代码：

    var video = document.getElementById("videoPlayer");
    var z = 1;
    function start(){
        video.addEventListener('play', function () {
            timerCallback();
        });
        video.play();
    }
    
    function timerCallback() {
        if (video.paused || video.ended) {
            over();
            return;
        }
        draw();
        setTimeout(function () {
            timerCallback();
        }, 40);
    }
    function draw() {
        var canvasDiv = document.getElementById("canvas");
        var canvas = document.createElement("canvas");
        canvas.width = 770;
        canvas.height = 964;
        canvas.style.zIndex = z;
        canvasDiv.appendChild(canvas);
        var context = canvas.getContext("2d");
        context.drawImage(video, 0, 0, video.clientWidth, video.clientHeight);
        canvas.style.display = 'none';
        z++;
    }
    function over(){
        var videoDiv = document.getElementsByClassName('video')[0];
        videoDiv.style.display = 'none';

        var length = $('#canvas canvas').length;
        console.log(length);
    }
    
    $(window).scroll( function() {
        var length = $('#canvas canvas').length;
        
        var scrollNum = $(this).scrollTop();
        var temp = scrollNum / (964/2);
        var thisCanvas = length * temp ;
        console.log('scrollNum :'+ scrollNum);
        console.log('temp :'+temp);
        console.log('thisCanvas :'+thisCanvas);
    });

Answer 1

我的大概的思路： (滚动的Y值-初始Y值) / 每一帧需要的滚动距离 = 取整的结果值就是需要显示的canvas数组里的下标， 然后让这幅cancas显示，前一个和后一个隐藏

Answer 2

我想控制两个canvas的显示/隐藏要比700考虑的东西要简单一些把