HTML part
<link href="https://fonts.googleapis.com/css?family=Montserrat:900&display=swap" rel="stylesheet">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
<div class="slide">
<img src="https://images.pexels.com/photos/1451471/pexels-photo-1451471.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
<p class="p">
A beautiful background with string plant,buzzling lights,wooden furniture.
</p>
</div>
CSS part
body{
margin:0;
padding:0;
overflow-x:hidden;
}
.b1 {
background-color:#27AE60;
width:100vw;
height:100vh;
}
.b2 {
background-color:#2471A3 ;
width:100vw;
height:100vh;
}
.b3 {
background-color:#6C3483 ;
height:100vh;
width:100vw;
}
.slide {
display:flex;
justify-content:space-evenly;
align-items:center;
height:100vh;
}
.slide img {
height:300px;
width:300px;
object-fit:cover;
opacity:0;
transform:translateY(160px);
}
.slideA1 {
animation:image 3s 2s ease;
opacity:1;
//transition:opacity 0.7s ease;
}
@keyframes image {
100%{
opacity:1;
transform:translateY(0px);
}
}
.slide p {
font-size:3rem;
margin-left:40px;
font-family:'Montserrat';
transform:translateY(-190px);
opacity:0;
}
.slideA2 {
animation:text 3s 2s ease;
opacity:1;
}
@keyframes text {
100%{
opacity:1;
transform:translateY(0px);
}
}
JS part
console.clear()
const img = document.querySelector('img'),
p = document.querySelector('p'),
block = document.querySelector('.b1'),
block2 = document.querySelector('.b2')
let blockDetails = block.getBoundingClientRect()
let blockDetails2 = block2.getBoundingClientRect()
//console.log(blockDetails2)
window.addEventListener('scroll',() => {
//console.log(true)
if(window.pageYOffset > blockDetails.width * 3) {
img.classList.add('slideA1')
//img.style.opacity = 1
p.classList.add('slideA2')
//p.style.opacity = 1
}
})
After the class is being added ,the elements are working but after that ,they vanish