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

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

作者: 喵呜Yuri | 来源:发表于2018-03-09 16:41 被阅读440次
    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啦!

    相关文章

      网友评论

          本文标题:animate.css官网网页模块渐入效果

          本文链接:https://www.haomeiwen.com/subject/zefmfftx.html