animate.css官网网页模块渐入效果

image.png

前提是引用animate.css
html代码:
例如，在想要渐入的元素块上添加‘animated’，在属性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啦!