js - 简书

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>从左侧渐入</title>
    <style>
        /* 从左侧渐入 */
        div{
            background-color: rgb(138, 188, 209);
            width: 600px;
            height: 100px;
            margin: 10px;
        }
        .fade{
            opacity: 0;
            transform: translateX(-600px);
        }
        .left-in {
            /* 定义动画 */
            animation-duration: 1000ms; /* 动画时间 */
            animation-name: left-in; /* 关键帧名字 */
        }

        /* 定义关键帧 */
        @keyframes left-in {
            0% {
                opacity: 0;
                transform: translateX(-600px);
            }

            100% {
                opacity: 1;
                transform: translateX(0px);
            }
        }

        .right-in {
            /* 定义动画 */
            animation-duration: 1000ms; /* 动画时间 */
            animation-name: right-in; /* 关键帧名字 */
        }

        /* 定义关键帧 */
        @keyframes right-in {
            0% {
                opacity: 0;
                transform: translateX(600px);
            }

            100% {
                opacity: 1;
                transform: translateX(0px);
            }
        }

    </style>

</head>

<body>
<div style="height: 800px">box</div>
<div class="fade fade-left">模块一</div>
<div class="fade fade-left">模块二</div>
<div class="fade fade-left">模块三</div>
<div class="fade fade-left">模块四</div>
<div class="fade fade-right">模块五</div>
<div class="fade fade-right">模块六</div>

<script>
    function fadeIn () {
        window.onscroll = function () {
            // let reClassName = /fade-[^"]*/
            // let str = 'fade-right'
            // console.log(str.match(reClassName).length);
            // //div距离顶部的距离
            let fadeInBox = document.getElementsByClassName('fade');
            // console.log(typeof fadeInBox);
            // console.log(fadeInBox);
            // console.log('fade-' + obj.direction);
            // console.log(fadeInBox.length);
            // console.log(fadeInBox[0].innerHTML);
            // console.log(fadeInBox[0].className);
            let i = 0;
            while (i < fadeInBox.length) {
                // console.log(fadeInBox[i].innerHTML);
                // 遍历所有匹配的元素

                let toBox = fadeInBox[i];
                let toTop = toBox.getBoundingClientRect().top;

                // 获取每个元素的class全部属性
                let boxClass = fadeInBox[i].className;
                console.log(boxClass)
                setTimeout(function (){
                    if (toTop<800 &&  boxClass.includes('fade-left')) {
                        toBox.classList.add('left-in');
                        toBox.classList.remove('fade','fade-left');
                    }else if (toTop<800 && boxClass.includes('fade-right')) {
                        toBox.classList.add('right-in');
                        toBox.classList.remove('fade','fade-right');
                    }
                },5000);

                i++;
            }

            // let toTop = fadeInBox.getBoundingClientRect();
            // console.log(toTop);
            // if (toTop.top<500) {
            //   console.log('测试', toTop.top)
            //   fadeInBox.classList.add('left-in')
            // }
        }
    }
    fadeIn();
</script>
<!--  <script>-->
<!--    $(function(){-->
<!--      if ($("#SuspensionFrame").offset().top>200) {-->
<!--        console.log($(window).height())-->
<!--      }else {-->
<!--        console.log('dddd')-->
<!--      }-->
<!--    })-->
<!--  </script>-->
</body>

</html>
js

推荐阅读更多精彩内容
