Изображение Parallax переходит в другую прокрутку вниз

Question

Возможно ли это, и каким будет самый простой/чистый способ сделать это?

1.) Когда пользователь прокручивает вниз, изображение (Img1) начинает замирания в втором изображении (Img2). Изображение исчезает из статического положения, расположенного точно так же, как и оригинал. (Просто образ, кстати, а не фон.) Возвращаясь вверх, это делается наоборот.

2.) Код будет включать в себя значение, когда начинается переход (scroll_pos?) И значение для продолжительности переходного процесса (значение FadeIn?).

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