這邊利用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

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

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