console 命令行工具 X clear

console

const boxList = document.querySelectorAll('.box')
//
// console.log(window.innerHeight, 'innerHeight');
// console.log(window.innerHeight / 5, 'innerHeight / 5');
// console.log(window.innerHeight / 5 * 4, 'innerHeight / 5 * 4');


// console.log(boxList[0].getBoundingClientRect());
// console.log(boxList[1].getBoundingClientRect());
// console.log(boxList[0].offsetTop);
// console.log(boxList[1].offsetTop);

// 初始进入执行一次
scrollLoad()

// 滚动执行
window.addEventListener('scroll', scrollLoad)


function scrollLoad() {

    boxList.forEach(box => {
        // 当前盒子距离顶部的Top
        const boxTop = box.getBoundingClientRect().top

        // 触发的条件 , 整体高度的 80%
        const triggerBottom = window.innerHeight * 0.8

        if (boxTop <= triggerBottom) {
            box.classList.add('show')
        } else {
            box.classList.remove('show')
        }
    })
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>

<div class="box">Content1</div>
<div class="box">Content2</div>
<div class="box">Content3</div>
<div class="box">Content4</div>
<div class="box">Content5</div>
<div class="box">Content6</div>
<div class="box">Content7</div>
<div class="box">Content8</div>
<div class="box">Content9</div>
<div class="box">Content10</div>


</body>
<script src="index.js"></script>
</html>

* {
    margin: 0;
    padding: 0;
}

html, body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.box {
    width: 1200px;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #735DE8;
    border-radius: 8px;
    color: #fff;
    font-size: 30px;
    margin-top: 20px;
    transition: transform 0.4s ease, opacity 0.4s linear;
    box-sizing: border-box;
}

.box:nth-child(even) {
    transform: translateX(-400%);
    opacity: 0;
}

.box:nth-child(odd) {
    transform: translateX(400%);
    opacity: 0;
}

.box.show {
    transform: translateX(0);
    opacity: 1;
}