javascript 隐藏元素滚动

Posted 2021-05-03

<img alt="Wilderly Bride" src="/assets/1550/collection-wilderly.jpg" class="hidden-element">

.hidden-element {
  opacity: 0;
  position: relative;
}
.hidden-element.element-load {
  animation: fade-in 0.75s linear forwards;
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

  /* ==========================================================================
  Hidden before scroll
  ========================================================================== */


  $(window).scroll( function(){

    // trigger script when target is in view
    $('.hidden-element').each(function(){

      var bottom_of_object = $(this).offset().top + $(this).outerHeight();
      var bottom_of_window = $(window).scrollTop() + $(window).height();

      // get half height of object
      bottom_of_object -= $(this).outerHeight() / 2;

      // If the object is halfway visible in the window, fade it in
      if (bottom_of_window > bottom_of_object){
      $(this).addClass('element-load');
      }
    });
  });