day06 滚动查看动画

滚动查看动画

html

<div class="container">
        <h1>Scroll to see the animation</h1>
        <div class="content">Content</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
    </div>

css

*{
            padding: 0;
            margin: 0;
        }
        body{
            background-color: #efedd6;
            display: flex;
            justify-content: center;

            align-items: center;
            overflow-x: hidden ;
        }

        h1{
            font-size: 38px;
            margin: 10px 0;
        }
        .content{
            width: 500px;
            height: 260px;
            background-color: #4682b4;
            border-radius: 10px;
            box-shadow: 5px 5px 5px rgba(0,0,0,0.2) ;
            margin: 25px 0;
            color: #ffffff;
            font-size: 48px;
            font-weight: bold;
            line-height: 260px;
            text-align: center;
            transform: translateX(400%);
            transition: transform 0.4s ease-in;
        }
        .content:nth-of-type(even) {
            transform: translateX(-400%);
        }
        .show{
            transform: translateX(0);
        }

js

const boxs = document.getElementsByClassName('content');
        checkBoxs();
        console.log(111)
        window.addEventListener('scroll',checkBoxs);
        function checkBoxs(){
            const vBottom = window.innerHeight / 5 * 4;
            for (const box of boxs) {
                const boxTop = box.getBoundingClientRect().top;
                if(boxTop < vBottom){
                    box.classList.add('show');
                }else{
                    box.classList.remove('show');
                }
            }

        }