点击按钮,人物沿着路径往下走,屏幕也跟随滚动,
怎么实现啊
https://www.heshidai.com/xsrw/index.html
用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>
這邊利用 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
你有没有发现人物的走向都是直线?这个不就是很简单变化图片的位置么,把图片绝对定位,动态改变left
和top
值。