image.png

前提是引用animate.css
html代碼:
例如，在想要漸入的元素塊上添加‘a(chǎn)nimated’，在屬性type中添加你想要的漸入效果‘slideInLeft’

<div class="project animated" type="slideInLeft" id="story">
</div>
<div class="project animated" type="slideInDown" id="activity">
</div>

css代碼

 .animated{
            visibility: hidden;
        }
        .animated.in{
            visibility: visible;
        }

js代碼

    var animateArr = [];

    $('.animated').each(function (k,v) {
    animateArr.push($(v).offset().top);
    });

   var thisDivIndex = 0;
   $(window).scroll(function () {
       var glt = animateArr[0]+700;
        var lt = animateArr[0]+500;
       if(($(window).scrollTop()>lt)&&($(window).scrollTop()<glt)){
           var thisDiv =  $($('.animated')[thisDivIndex]);
           var animateCss = thisDiv.attr('type');
           thisDiv.removeClass(animateCss);
           thisDiv.addClass(animateCss);
           thisDiv.addClass('in');
           animateArr.splice(0,1);
           thisDivIndex++;
       }
   });

貼這些代碼進去，就ok啦!