動畫圖像從左到右滾動

我想要做的是我有大約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/ –

動畫圖像從左到右滾動

回答

相關問題