視差圖像過渡到另一個滾動的下方

Question

以下可能，以及最簡單/最乾淨的方法是什麼？

1）當用戶向下滾動時，圖像（IMG1）開始衰落成第二圖像（IMG2）。圖像從靜態位置淡入，與原始位置完全相同。 （順便說一句，不是背景。）回到上方，情況正好相反。

2.）該代碼將包括當過渡開始（scroll_posα）和過渡過程 （淡入值的持續時間的值的值？）。

3.）它也應該在移動設備上工作。

我從字面上只是打開了關於jquery的書，發現了一些與背景顏色相似的主題，但沒有一個像這種情況。非常好奇，看看處理這個問題的最好方法是什麼。 :)

一些隨機的例子圖片：

• IMG1： http://icons.iconarchive.com/icons/designbolts/free-multimedia/1024/Cd-icon.png

• IMG2： http://www.freeiconspng.com/uploads/multimedia-photo-icon-31.png

在此先感謝，期待最好的解決方案！

Answer 1

簡單的把圖像在彼此：

#img1{ 
z-index:1; 
opacity:1; 
} 
#img2{ 
z-index:3; 
opacity:0; 
} 

比做某事像

$(document).scroll(()=>{ 
    scroll=$(document.body).scrollTop(); 
    min=100; 
    max=200; 
    $("#img2").css("opacity",(scroll-min)/(max-min)); 
});