<div class="wrap">
  <div class="item js-scroll">
    <img src="https://i.postimg.cc/65MQ4nt6/rose-1.jpg" alt="">
  </div>

  <div class="item js-scroll">
    <img src="https://i.postimg.cc/1t0mmNvQ/rose-2.jpg" alt="">
  </div>

  <div class="item js-scroll">
    <img src="https://i.postimg.cc/660WFn7V/rose-3.jpg" alt="">
  </div>

  <div class="item js-scroll">
    <img src="https://i.postimg.cc/RVZSmhfk/rose-4.jpg" alt="">
  </div>

  <div class="item js-scroll">
    <img src="https://i.postimg.cc/13LsDKTS/rose-5.jpg" alt="">
  </div>

  <div class="item js-scroll">
    <img src="https://i.postimg.cc/65MQ4nt6/rose-1.jpg" alt="">
  </div>

  <div class="item js-scroll">
    <img src="https://i.postimg.cc/1t0mmNvQ/rose-2.jpg" alt="">
  </div>

  <div class="item js-scroll">
    <img src="https://i.postimg.cc/660WFn7V/rose-3.jpg" alt="">
  </div>

  <div class="item js-scroll">
    <img src="https://i.postimg.cc/RVZSmhfk/rose-4.jpg" alt="">
  </div>

  <div class="item js-scroll">
    <img src="https://i.postimg.cc/13LsDKTS/rose-5.jpg" alt="">
  </div>
</div>

.wrap{
  padding: 80px 0;
  width: 100vw;
  background: #161616;
}
.item{
  width: 80vw;
  height: 80vw;
  min-height: 280px;
  min-width: 280px;
  max-height: 500px;
  max-width: 500px;
  margin: 80px auto;
  overflow: hidden;

  opacity: 0;
  transform: translate3d(0,80px,0);
  transition: 1s opacity ease, 1s transform ease;
  img{
    height: 100%;
    width: 100%;
    object-fit: cover;
  }

  &.-cue{
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

window.addEventListener("DOMContentLoaded", () => {
  class ScrollInAnime {
    constructor(){
      this.items = [...document.querySelectorAll(".js-scroll")];
      this.isScroll = true;
      this.fromBtm = 200;
      console.log(this.items)

      this.onScroll = this.onScroll.bind(this);
      this.init();
    }

    onScroll(){
      this.isScroll = true;

      this.items.forEach(item => {
        let rect = item.getBoundingClientRect();

        if (rect.top < window.innerHeight - this.fromBtm)
          item.classList.add("-cue");
      });
    }


    init(){
      this.onScroll();

      window.addEventListener("resize", e => {
        this.onScroll();
      }, {passive: true});

      window.addEventListener("scroll", e => {
        if (this.isScroll) {
          requestAnimationFrame(this.onScroll);
          this.isScroll = false;
        };
      }, {passive: true});
    }
  }
  new ScrollInAnime();
});