javascript 动画在视口中

Posted 2021-05-03

//http://jsfiddle.net/RokoCB/tw6g2oeu/7/ 

(function($, win) {
          $.fn.inViewport = function(cb) {
              return this.each(function(i,el){
                  function visPx(){
                      var H = $(this).height(),
                          r = el.getBoundingClientRect(), t=r.top, b=r.bottom;
                      return cb.call(el, Math.max(0, t>0? H-t : (b<H?b:H)));
                  } visPx();
                  $(win).on("resize scroll", visPx);
              });
          };
      }(jQuery, window));

      $(".c-arrow-down-anim").inViewport(function(px){
          if(px) $(this).find('i').addClass("fadeInLeft").delay( 5000 ) ;
      });
      
      
      
      // CSS
      
      // CSS animations https://www.theappguruz.com/tag-tools/web/CSSAnimations/
      .c-arrow-down-anim {
  @include font-size(2);
  text-align: center;
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-300%, 0, 0);
    transform: translate3d(-300%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-300%, 0, 0);
    transform: translate3d(-300%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}