动画图像从左到右滚动

我想要做的是我有大约6个内嵌图像我想从左到右滑动它们在特定位置并停在那里为每个图像。当scrool过来时，图像必须滑动。我想这个JavaScript为它（完全陌生的JS）动画图像从左到右滚动

$(window).scroll(function(){ 
if($this.scrollTop()>300) 
{ 
    $('.onfoot1').slideright(); 
} 
function slideright(){ 
    var a = getElementsByClassName('.onfoot1'); 
    var stoppos = 100; 
    if (parseInt(a.style.left)< stoppos) 
    { 
     a.style.left = parseInt(a.style.left) + 3 + "px"; 
     setTimeout(slideright , 1); 
    } 
} 
});

标记

<div class="onfoot1"></div>

CSS

div.onfoot1{ 
    content:url(../img/onfoot1.jpg); 
    left:0;  
}

来源

2016-06-09 parish parab

使用ScrollMagic库GSAP。（如果你不小心，手动使用滚动事件可能会有不好的表现。）btw，不要动画'left'，使用'transform：translate'，因为它避免了布局重新计算。谢谢 – gcampbell

我已经把你的代码工作examle：https://jsfiddle.net/hmzw9y65/

我在那里做了一些假设......你正在使用$(...)语法，所以我猜你正在使用JQuery。 JQuery有一个.animate（）函数，它应该可以做到这一点（）。另外我猜你可能想要固定div的css位置，以便在滚动时保持在屏幕上。

编辑：我注意到，你不想让你在屏幕底部的图像，但动画时，屏幕到达它。更新我的小提琴做到这一点：https://jsfiddle.net/hmzw9y65/1/

来源

2016-06-09 08:45:46

谢谢！ –

你可以发布代码图像来自ritght请 –

我想你仍然希望你的内容是左侧的，所以我调整了解决方案，在父容器上使用隐藏溢出并将图像原本定位在'left：100％'：https ：//jsfiddle.net/hmzw9y65/2/ –

动画图像从左到右滚动

回答

相关问题