元素進入屏幕可視區域，觸發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');