首先是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; 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

var xh_hei = $(window).height();

function checkScroll() {
    _wrapperTranslate = $(document).scrollTop();
    for (i = 0; i < anis.length; i++) {
        const top = $(anis[i]).offset().top
        if (top < (_wrapperTranslate + xh_hei - 50) && anis[i].style.visibility == 'hidden') {
            anis[i].style.visibility = 'visible';
            anis[i].className = "" + anis[i].classCache + " " + 'animated';
        }
    }
}

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

checkScroll();

好了试下吧！

完整js文件，需要引入jq

anis = document.querySelectorAll('.ani');
for (i = 0; i < anis.length; i++) {
    anis[i].style.visibility = 'hidden';
    anis[i].classCache = anis[i].className;
    anis[i].className = '';
}
var xh_hei = $(window).height();

function checkScroll() {
    _wrapperTranslate = $(document).scrollTop();
    for (i = 0; i < anis.length; i++) {
        const top = $(anis[i]).offset().top
        if (top < (_wrapperTranslate + xh_hei - 50) && anis[i].style.visibility == 'hidden') {
            anis[i].style.visibility = 'visible';
            anis[i].className = "" + anis[i].classCache + " " + 'animated';
        }
    }
}
checkScroll();
$(window).scroll(function () {

    checkScroll();
})

其他小方法

    <script>
        $(window).scroll(function () {
            var top = $('.member-power-bj').offset().top
            var windowsHeight = $(window).height();
            var _wrapperTranslate = $(document).scrollTop();

            var size = windowsHeight + _wrapperTranslate - top - (windowsHeight / 2)
            console.log(size)

            if (size > 0 && size < 3600) {
                console.log(size)

                document.querySelector('.member-power-bj').style.transform = "rotate(" + size / 10 + "deg)";

            }
        })
    </script>