视差图像过渡到另一个滚动的下方

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)); 
});