0

Is the following possible, and what would be the easiest/cleanest way to do so?

1.) When a user scrolls down, an image (img1) starts fading into a second image (img2). The image fades in from a static position, positioned exactly the same as the original. (Just an image by the way, not a background.) Going back upwards it does the opposite.

2.) The code would include a value of when the transition starts (scroll_pos ?) and a value for the duration of the transition process (fadeIn value ?).

3.) It should work on mobile devices too.

I literally just opened the book on Jquery and found slightly similar topics regarding background color, but none like this case. Very curious to see what the best way would be to handle this. :)

some random example images:

Thanks in advance, looking forward to the best solution!

TimVanGorp
  • 75
  • 1
  • 1
  • 7

1 Answers1

0

Simply put the images over each other:

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

Than do sth like

$(document).scroll(()=>{
  scroll=$(document.body).scrollTop();
  min=100;
  max=200;
  $("#img2").css("opacity",(scroll-min)/(max-min));
});
Jonas Wilms
  • 132,000
  • 20
  • 149
  • 151
  • Thank you so much for your time & try Jonas, but it doesn't seem to work: https://jsfiddle.net/8kkz7n4x/1/ – TimVanGorp Nov 14 '16 at 23:52
  • Had some mistakes (edited) , but you need to look a bit deeper into your jquery book ( may click on the settings at javascript on jsfiddle...) – Jonas Wilms Nov 15 '16 at 14:48
  • I appreciate your help, thank you so much. But still no success :( – TimVanGorp Nov 17 '16 at 15:28
  • Just added another factor to make the transition more slow (*0.3) , and ive switched on jquery... – Jonas Wilms Nov 17 '16 at 16:12
  • Hi Jonas. That's strange... when I test your https://jsfiddle.net/8kkz7n4x/12/ in both IE and Firefox, the image doesn't transition into the 2nd. :l – TimVanGorp Nov 17 '16 at 23:44
  • IE is the biggest crap ever. However you might need to scroll down more, to see the transition. Or you may reduce the min and max... https://jsfiddle.net/8kkz7n4x/14/ – Jonas Wilms Nov 18 '16 at 06:45
  • Agree with you on IE :) But are you seeing the transition in your jsfiddle? I've played with the values and still nothing.... I might be wrong, but doesn't your code lack the ability to give img2 a higher opacity than img1's? – TimVanGorp Nov 18 '16 at 14:57
  • It works for me... Opacity is the opposite of transparency. It does not need to have a higher transparency. As its over the other image, if it has an opacity of 1 it means it is completely visible – Jonas Wilms Nov 18 '16 at 15:03
  • I recommend you to multiply min and max with window.innerHeight, to make it relative with the windows height. (Scrolling 400px on a smartphone vs scrolling 400px an a tv...) – Jonas Wilms Nov 18 '16 at 15:05