屏幕跟随人物滚动往下

Question

点击按钮，人物沿着路径往下走，屏幕也跟随滚动，怎么实现啊https://www.heshidai.com/xsrw/index.html

Answer 1

這邊利用 jQuery 的 animate 來實現動畫，只要就是預先設置好幾個路徑點，讓他依照這些路徑點走，而捲軸滾動則是靠著 animate 的 progress 回調，在播放動畫時持續監測捲軸位置是否小於物體的位置

var animations = [
    {        x: 100,        y: 100
    },
    {        x: 150,        y: 300
    },
    {        x: 300,        y: 800
    }
]var $box = $('.box')for(var i = 0, len = animations.length ; i < len ; i++) {
    $box.animate({        top: animations[i].y,        left: animations[i].x
    }, {        duration: 2000,        progress: function() {            if($(document).scrollTop() < $box.offset().top) {                // 讓捲軸滾動到物體居中的狀態
                $(document).scrollTop($box.offset().top - window.innerHeight / 2)
            }
        }
    })
}

實現

jsFiddle