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

image.png

前提是引用animate.css
html代码:
例如,在想要渐入的元素块上添加‘animated’,在属性type中添加你想要的渐入效果‘slideInLeft’

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()

贴这些代码进去,就ok啦!

你可能感兴趣的:(animate.css官网网页模块渐入效果)