<div class="anime">
  <h1>メイン画像やメインテキスト</h1>
</div>

<div>
  <ul>
    <li class="fadein"><img src="https://www.nan-demo.work/wp-content/uploads/2022/07/image04.jpg"</li>
    <li class="fadein"><img src="https://www.nan-demo.work/wp-content/uploads/2022/07/image03.jpg"</li>
    <li class="fadein"><img src="https://www.nan-demo.work/wp-content/uploads/2022/07/image02.jpg"</li>
    <li class="fadein"><img src="https://www.nan-demo.work/wp-content/uploads/2022/07/img05.jpg"></li>
    <li class="fadein"><img src="https://www.nan-demo.work/wp-content/uploads/2022/07/img04.jpg"></li>
    <li class="fadein"><img src="https://www.nan-demo.work/wp-content/uploads/2022/07/img02.jpg"></li>
    <li class="fadein"><img src="https://www.nan-demo.work/wp-content/uploads/2022/07/img01.jpg"></li>
    <li class="fadein"><img src="https://www.nan-demo.work/wp-content/uploads/2022/06/image01.jpg"</li>
    <li class="fadein"><img src="https://www.nan-demo.work/wp-content/uploads/2022/07/img03.jpg"</li>
  </ul>
</div>

img {
    width: 100%;
}

h1 {
  width:100%;
  max-width:1200px;
  margin:0 auto 4rem;
  height:250px;
  line-height: 250px;
  background:#ffe1e1;
  text-align:center;
}

ul {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}

ul li {
  width: 32%;
  list-style: none;
  margin-bottom:2%;
}

.fadein {
  opacity:0;
}

.anime {
  animation-name: fade_bottom;
  animation-duration: 3s;
  opacity:1;
}

@keyframes fade_bottom {
  from {
    opacity: 0;
    transform: translateY(80px);
  }
  
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

$(window).scroll(function (){
  $('.fadein').each(function(){
    var elemPos = $(this).offset().top,
    scroll = $(window).scrollTop(),
    windowHeight = $(window).height();

      if (scroll > elemPos - windowHeight + 100){
        $(this).addClass('anime');
      }
  });
});