CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Chobbit
Chobbit

Reputation: 654

Change image based on images position on the screen

I've been trying to find a way that an image will fade and switch to a different image when the images container is visible and scrolled up a certain amount on screen and changes back when you scroll the element back down.

I found the exact functionality being used on this page: http://www.asicstiger.com/gb/en-gb/knit (the 4th section down under the video). I know you could use a jQuery scrollTop method in some cases and all the examples I've found on stackoverflow so far mention this but it doesn't work on my responsive page as elements move around on the page so the images I wan't to switch aren't always at the same hight from page top.

.top {height:100vh;width:100%; background:red}
.scrollImageSwap {width:100%;}
.scrollImageSwap img {width:100%;}
.scrollImageSwap .image1 {display:block;}
.scrollImageSwap .image2 {display:none;}
.bottom {height:100vh;width:100%; background:red}
<div class="top"></div>
<div class="scrollImageSwap">
  <img class="image1" src="https://openclipart.org/image/800px/svg_to_png/19972/ivak-TV-Test-Screen.png" alt="image 1" />

  <img class="image2" src="http://www.hertenkamp-enkhuizen.nl/test/wp-content/uploads/sites/7/2015/06/testbeeld.jpg" alt="image 2" />
</div>
<div class="bottom"></div>

Can anyone help?

Upvotes: 1

Views: 436

Answers (1)

Rubenxfd
Rubenxfd

Reputation: 464

OP noticed the solution worked, but did not use a fade. I have updated the answer.

You can use jQuery's fadeIn(); and fadeOut(); to achieve this:

$(document).scroll(function(){
        if($(this).scrollTop() >= $('.scrollImageSwap').offset().top - 5) {

          $(".image1").stop().fadeOut(1000, function(){
            $(".image2").stop().fadeIn(1000);
          }); 
        } 

        else {
            $(".image2").stop().fadeOut(1000, function(){
            $(".image1").stop().fadeIn(1000);
          });
        }
    });

This should work properly, as shown in this fiddle.

Upvotes: 1

Related Questions