屏幕跟随人物滚动往下

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

Answer 2

用js或者css3控制图片向下移动，同时用js控制网页向下滚动，2者速度一样即可

<style>
.image {
    animation: all 5s linear;
    /* Firefox: */
    -moz-animation: all 5s linear;
    /* Safari 和 Chrome: */
    -webkit-animation: all 5s linear ;
    /* Opera: */
    -o-animation: all 5s linear ;
}
</style>

<script>
    $(".image").css("top","100px");
    $("html,body").animate({scrollTop:100},5000);
</script>

Answer 3

你有没有发现人物的走向都是直线？这个不就是很简单变化图片的位置么，把图片绝对定位，动态改变left和top值。