CODEWITHSUNDEEP
jqueryhtmlcssscroll
Saravanan Sankar
Saravanan Sankar

Reputation: 189

How to make images fade, visible when i'm scrolling and the action should be reapeat

I'm using the below js script and css for make all images visibility hidden and while scrolling it will show slowly. Its working fine but my question is its working once when the page was loaded. How can I make the image fade and come not only once when the page was loaded, the action must be repeat.

function showImages(el) {
  var windowHeight = jQuery(window).height();
  $(el).each(function() {
    var thisPos = $(this).offset().top;

    var topOfWindow = $(window).scrollTop();
    if (topOfWindow + windowHeight - 200 > thisPos) {
      $(this).addClass("fadeIn");
    }
  });
}

$(window).scroll(function() {
  showImages('.star');
});
.star {
  visibility: hidden;
}

.fadeIn {
  -webkit-animation: animat_show 0.8s;
  animation: animat_show 0.8s;
  visibility: visible !important;
}

@-webkit-keyframes animat_show {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Test</p>
<p>Test</p>
<img class="star" src="https://www.w3schools.com/html/pic_trulli.jpg"/>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<img class="star" src="https://www.w3schools.com/html/pic_trulli.jpg">
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<img class="star" src="https://www.w3schools.com/html/pic_trulli.jpg">
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Other  test</p>

Upvotes: 1

Views: 845

Answers (1)

Sarath Hari
Sarath Hari

Reputation: 219

function showImages(el) {
  var windowHeight = jQuery(window).height();
  $(el).each(function() {
    var thisPos = $(this).offset().top;

    var topOfWindow = $(window).scrollTop();
    if (topOfWindow + windowHeight - 200 > thisPos) {
      $(this).addClass("fadeIn");
    }else{
      $(this).removeClass("fadeIn");
    }
  });
}

$(window).scroll(function() {
  showImages('.star');
});
.star {
  visibility: hidden;
  transition: visibility cubic-bezier(.165, .84, .44, 1) .25s;
}

.fadeIn {
  -webkit-animation: animat_show 0.8s;
  animation: animat_show 0.8s;
  visibility: visible !important;
}

@-webkit-keyframes animat_show {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Test</p>
<p>Test</p>
<img class="star" src="https://www.w3schools.com/html/pic_trulli.jpg"/>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<img class="star" src="https://www.w3schools.com/html/pic_trulli.jpg">
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<img class="star" src="https://www.w3schools.com/html/pic_trulli.jpg">
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Other  test</p>

Upvotes: 1

Related Questions