js滑屏加载特效!

首先是html

原理是要用到animate.css这个css 具体可以随便到哪里下载! 然后引入即可!

<div class="main">
  <p class="ani bounceInLeft">左边进入</p>
                <p class="ani bounceInDown">下面进入</p>
                <p class="ani bounceInRight">右面进入</p>
                <p class="ani bounceInUp">上面进入</p>
                <p class="ani flash">闪亮</p>
                <p class="ani shake">摇动</p>
                <p class="ani flip">翻转</p>
                <p class="ani lightSpeedIn">移动进入</p>
                <p class="ani bounceInLeft">左边进入</p>
                <p class="ani bounceInDown">下面进入</p>
                <p class="ani bounceInRight">右面进入</p>
                <p class="ani bounceInUp">上面进入</p>
                <p class="ani flash">闪亮</p>
                <p class="ani shake">摇动</p>
                <p class="ani flip">翻转</p>
                <p class="ani lightSpeedIn">移动进入</p>
                <p class="ani bounceInLeft">左边进入</p>
                <p class="ani bounceInDown">下面进入</p>
                <p class="ani bounceInRight">右面进入</p>
                <p class="ani bounceInUp">上面进入</p>
                <p class="ani flash">闪亮</p>
                <p class="ani shake">摇动</p>
                <p class="ani flip">翻转</p>
                <p class="ani lightSpeedIn">移动进入</p>
                <p class="ani bounceInLeft">左边进入</p>
                <p class="ani bounceInDown">下面进入</p>
                <p class="ani bounceInRight">右面进入</p>
                <p class="ani bounceInUp">上面进入</p>
                <p class="ani flash">闪亮</p>
                <p class="ani shake">摇动</p>
                <p class="ani flip">翻转</p>
                <p class="ani lightSpeedIn">移动进入</p>
                <p class="ani bounceInLeft">左边进入</p>
                <p class="ani bounceInDown">下面进入</p>
                <p class="ani bounceInRight">右面进入</p>
                <p class="ani bounceInUp">上面进入</p>
                <p class="ani flash">闪亮</p>
                <p class="ani shake">摇动</p>
                <p class="ani flip">翻转</p>
                <p class="ani lightSpeedIn">移动进入</p>
                <p class="ani bounceInLeft">左边进入</p>
                <p class="ani bounceInDown">下面进入</p>
                <p class="ani bounceInRight">右面进入</p>
                <p class="ani bounceInUp">上面进入</p>
                <p class="ani flash">闪亮</p>
                <p class="ani shake">摇动</p>
                <p class="ani flip">翻转</p>
                <p class="ani lightSpeedIn">移动进入</p>
                <p class="ani bounceInLeft">左边进入</p>
                <p class="ani bounceInDown">下面进入</p>
                <p class="ani bounceInRight">右面进入</p>
                <p class="ani bounceInUp">上面进入</p>
                <p class="ani flash">闪亮</p>
                <p class="ani shake">摇动</p>
                <p class="ani flip">翻转</p>
                <p class="ani lightSpeedIn">移动进入</p>
                <p class="ani bounceInLeft">左边进入</p>
                <p class="ani bounceInDown">下面进入</p>
                <p class="ani bounceInRight">右面进入</p>
                <p class="ani bounceInUp">上面进入</p>
                <p class="ani flash">闪亮</p>
                <p class="ani shake">摇动</p>
                <p class="ani flip">翻转</p>
                <p class="ani lightSpeedIn">移动进入</p>

</div>


然后是html 每个都需要增加一个固定ani属性!

让后我们把需要运动的属性隐藏,visibility属性!不是display;

    anis = document.querySelectorAll('.ani');//获取所有的class然后把class备份!再取消class并隐藏!
       for(i=0;i<anis.length;i++){
           anis[i].style.visibility ='hidden' ;
           anis[i].classCache=anis[i].className;
           anis[i].className ='';
       }

然后我们就需要在滑动的时候加载

$(window).scroll(function() {
checkScroll();
}

加载的js

function checkScroll(){
_wrapperTranslate=$(document).scrollTop();
console.log("当前滚动高度:"+_wrapperTranslate+"屏幕高度:"+(_wrapperTranslate+xh_hei-50))
  for(i=0;i<anis.length;i++){
            if(anis[i].offsetTop<(_wrapperTranslate+xh_hei-50) && anis[i].style.visibility =='hidden'){
                anis[i].style.visibility ='visible';
                anis[i].className = "" + anis[i].classCache + " " + 'animated';
                }
        }
}

这样滚动的时候就可以了! 但是这样的话就会有个情况,初始的第一屏不滚动不会加载那么我们可以先默认执行一遍

checkScroll();

好了试下吧!

image.png

写的好!

微信扫一扫赏大洋