js实现页面下拉，区块（文字，图片等）左右淡入淡出效果

html：

<div class="box">
<span class="historybox">
</span>
</div>
<div class="box">
<span class="historybox1">
</span>
</div>

css：

<style type="text/css">
body {
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0;
overflow-x: hidden;
}

.box {
display: inline-block;
color: black;
display: flex;
align-items: center;
justify-content: center;
width: 600px;
padding-top: 50px;
margin-top: 20px;
transform: translateX(200%);
transition: transform 0.5s ease;
background: firebrick;
}

.box:nth-of-type(even) {
transform: translateX(-200%);
}

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

.historybox:nth-of-type(even) {
transform: translateX(-200%);
}

.historybox.show {
transform: translateX(0);
}
</style>

js：

<script type="text/javascript">
let oBox = document.querySelectorAll('.box');

window.addEventListener('scroll', chBox);

chBox();

function chBox() {
let triggerBottom = (window.innerHeight / 5 * 4);

oBox.forEach(box => {
let boxTop = box.getBoundingClientRect().top;

if (boxTop < triggerBottom) {
box.classList.add('show');
} else {
box.classList.remove('show');
}
})
}
</script>

js实现页面下拉，区块（文字，图片等）左右淡入淡出效果的相关教程结束。