Lazy Loading Elements [Problem]

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