视差图像转换为另一个向下滚动

Question

以下是否可行，以及最简单/最干净的方法是什么？

  

1。）当用户向下滚动时，图像（img1）开始淡入第二个图像（img2）。图像从静态位置淡入，与原始位置完全相同。 （顺便说一下，这只是一个图像，而不是背景。）向上看，它恰恰相反。

     

2。）代码将包含转换开始时的值（scroll_pos？）和转换过程持续时间的值   （fadeIn value？）。

     

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