Hallo zusammen, was mache ich falsch? Es werden immer nur die 2. Boxen angezeigt. Ich bin ratlos.
HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Animate on Scroll</title>
</head>
<body>
<h1>Animate on Scroll</h1>
<br><br>
<div class="box box-show"><h2>HTML</h2></div>
<div class="box box-show"><h2>CSS</h2></div>
<div class="box box-show"><h2>Java</h2></div>
<div class="box box-show"><h2>JQery</h2></div>
<div class="box"><h2>Responsive</h2></div>
<div class="box"><h2>SEO</h2></div>
<div class="box"><h2>Wordpress</h2></div>
<div class="box"><h2>Support</h2></div>
<div class="box"><h2>Res. Support</h2></div>
<div class="box"><h2>About</h2></div>
<div class="box"><h2>Mobile</h2></div>
<div class="box"><h2>Content</h2></div>
<script>
const boxes = document.querySelectorAll('.box')
window.addEventListener('scroll', checkBoxes)
checkBoxes()
function checkBoxes(){
const triggerBottom = window.innerHeight / 6 * 4
boxes.forEach(box => {
const boxTop = box.getBoundingClientRect().top
if(boxTop < triggerBottom){
box.classList.add('box-show')
} else{
box.classList.remove('box-show')
}
})
}
</script>
</body>
</html>Code
*{
box-sizing: border-box;
}
body{
font-family: Arial, Helvetica, sans-serif;
display: flex;
font-weight: 300;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0;
overflow-x: hidden;
}
h1{
margin: 10px;
}
.box{
background-color: #fff;
border: 2px solid #3b3b3b;
color: #000;
display: flex;
align-items: center;
justify-content: center;
width: 400px;
height: 200px;
margin: 10px;
border-radius: 10px;
box-shadow: rgba(0,0,00.2) 0px 60px 40px -7px;
transform: translateX(400%);
transition: transform 0.4s ease;
}
.box:nth-of-type(even){
transform: translateX(-400%);
}
.box-show{
transform: translateX(0);
}
.box h2{
font-size: 22px;
font-weight: 400;
}