const blocks = document.querySelectorAll('.block');
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
entry.target.classList.toggle('show', entry.isIntersecting);
// if (entry.isIntersecting) {
// observer.unobserve(entry.target);
// }
})
}, {
threshold: 1.0,
});
blocks.forEach(block => {
observer.observe(block);
});<div class="page">
<div class="header"></div>
<div class="container">
<div class="block" id="block1"></div>
<div class="block yellow" id="block2"></div>
<div class="block green" id="block3"></div>
</div>
</div>body {
margin: 0;
padding: 0;
}
.page {
height: 2000px;
background-color: #e5e5e5;
background-position: 43px -14px, 0px 29px;
background-size: 86.4px 86.4px;
background-repeat: repeat;
background-image: radial-gradient(circle, white 11px, transparent 12px), radial-gradient(circle, white 11px, transparent 12px);
}
.header {
height:80px;
width:100%;
position:sticky;
top:0;
left:0;
right:0;
z-index: 100;
background-color:rgba(0,0,0,0.3);
box-shadow: 0 10px 15px -5px rgba(0,0,0,.8)
}
.container {
width: 1110px;
padding: 50px 15px;
margin: 0 auto;
background-color: rgba(255,255,255,0.3);
box-shadow: 0 10px 15px -5px rgba(0,0,0,.8)
}
.block {
width: 500px;
height: 300px;
background-color: pink;
border-radius: 16px;
transform: scale(1) translateX(-500%);
}
.block.show {
animation-name: slide-in;
animation-duration: 2s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
.block:not(:last-of-type) {
margin-bottom: 20px;
}
.block.yellow {
background-color: gold;
}
.block.green {
background-color: yellowgreen;
}
@keyframes slide-in {
0% {
opacity: 0;
filter: blur(160px);
transform: scale(0.1) translateX(-500%);
}
100% {
opacity: 1;
filter: blur(0px);
transform: scale(1) translateX(0);
}
}const blocks = document.querySelectorAll('.block');
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
entry.target.classList.toggle('show', entry.isIntersecting);
// if (entry.isIntersecting) {
// observer.unobserve(entry.target);
// }
})
}, {
threshold: 1.0,
});
blocks.forEach(block => {
observer.observe(block);
});
если вам важен рейтинг тут, напишите в виде ответа, а не комментария и я смогу отметить ваш ответ решением