屏幕跟随人物滚动往下

Question

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

Answer 1

這邊利用&nbsp;jQuery&nbsp;的&nbsp;animate&nbsp;來實現動畫，只要就是預先設置好幾個路徑點，讓他依照這些路徑點走，而捲軸滾動則是靠著&nbsp;animate&nbsp;的&nbsp;progress&nbsp;回調，在播放動畫時持續監測捲軸位置是否小於物體的位置var&nbsp;animations&nbsp;=&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x:&nbsp;100,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;y:&nbsp;100 &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x:&nbsp;150,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;y:&nbsp;300 &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x:&nbsp;300,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;y:&nbsp;800 &nbsp;&nbsp;&nbsp;&nbsp;} ]var&nbsp;$box&nbsp;=&nbsp;$('.box')for(var&nbsp;i&nbsp;=&nbsp;0,&nbsp;len&nbsp;=&nbsp;animations.length&nbsp;;&nbsp;i&nbsp;<&nbsp;len&nbsp;;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;$box.animate({&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top:&nbsp;animations[i].y,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left:&nbsp;animations[i].x &nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;duration:&nbsp;2000,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progress:&nbsp;function()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if($(document).scrollTop()&nbsp;<&nbsp;$box.offset().top)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;讓捲軸滾動到物體居中的狀態 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(document).scrollTop($box.offset().top&nbsp;-&nbsp;window.innerHeight&nbsp;/&nbsp;2) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}) }實現jsFiddle