元素進入屏幕區域，觸發animate動畫

   css:

//須要引入animate.css

[data-animation]{visibility: hidden;animation-duration:1.5s;
   -webkit-animation-duration:1.5s;opacity: 0;animation-fill-mode:forwards;}

html:

<div data-animation="fadeInUp" data-delay="0" class="item"></div>

js:

/*滾動animate特效*/$(window).scroll(function(){    $("[data-animation]").each(function(){        let ani = $(this).attr('data-animation');        let delay = $(this).attr('data-delay')!=undefined?$(this).attr('data-delay')*0.2:0;        let _this = $(this);        if($(window).scrollTop()>($(this).offset().top-$(window).height()+100) && !$(this).attr('animation-status')){            $(this).attr('animation-status','true');            $(this).css({                'visibility':'visible',                'animationName':ani,                'animationDelay':delay+'s'            });        }    });});$(window).trigger('scroll');