對於div和圖像的滾動效果

Question

當您向下滾動時，它具有滾動效果。就像當您向下滾動時一樣，div和圖像都會進入視圖併產生效果。它叫什麼，我該如何實現它？

編輯：視差滾動不是我要找的。向下滾動到「特色屬性」部分，然後查看水平顯示的3個圖像。如果您在該區域滾動，則會看到圖像滑動影響到該位置。我如何用div和圖片做到這一點？

Answer 1

如果您的意思是褪色效果：可以通過將不透明度與圖像的y值和文檔的y pos連接來實現。

$(document).on('scroll', window, function(){ 
    var opacity = 0; 
    var windowTop = $(window).scrollTop(); 
    var windowHeight = $(window).height(); 
    var windowCenter = windowTop+(windowHeight/2); 
    var windowBottom = windowTop+windowHeight; 
    var imageCenter = $('#img').offset().top+($('#img').height()/2); 
    if(windowCenter < imageCenter){ 
    opacity = ((windowBottom - imageCenter) * 2)/windowHeight; 
    }else{ 
    opacity = ((windowTop - imageCenter) * 2)/-windowHeight; 
    } 
    $('#img').css('opacity',opacity); 
}); 

https://jsfiddle.net/c3fu0xnb/