<ul>
  <li class="js-scroll-animation"><img width="1600" height="900" src="https://unsplash.it/1600/900" alt=""></li>
  <li class="js-scroll-animation"><img width="1600" height="900" src="https://unsplash.it/1600/900" alt=""></li>
  <li class="js-scroll-animation"><img width="1600" height="900" src="https://unsplash.it/1600/900" alt=""></li>
  <li class="js-scroll-animation"><img width="1600" height="900" src="https://unsplash.it/1600/900" alt=""></li>
  <li class="js-scroll-animation"><img width="1600" height="900" src="https://unsplash.it/1600/900" alt=""></li>
  <li class="js-scroll-animation"><img width="1600" height="900" src="https://unsplash.it/1600/900" alt=""></li>
  <li class="js-scroll-animation"><img width="1600" height="900" src="https://unsplash.it/1600/900" alt=""></li>
  <li class="js-scroll-animation"><img width="1600" height="900" src="https://unsplash.it/1600/900" alt=""></li>
</ul>
ul{
  display: flex;
  flex-wrap: wrap;
}
li{
  width: 50%;
  padding: 20px;
  box-sizing: border-box;
  
  /* 透過・非表示 */
  opacity: 0;
  visibility: hidden;
  
  /* 要素の位置指定・アニメーション */
  translate: 0 20px;
  transition: 1s;
}
img{
  width: 100%;
  height: auto;
}
/* クラス付与で表示する */
.is-active{
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}
//要素を取得
const animations = document.querySelectorAll('.js-scroll-animation');

function toggle() {
  animations.forEach((animation) => {
    //ウィンドウの高さを取得
    const height = window.innerHeight;
    
    //スクロール量を取得
    const scroll = window.scrollY;
    
    //要素の位置を取得
    const target = scroll + animation.getBoundingClientRect().top;  
    
    //スクロール位置を判定して要素にクラスを付与
    if (scroll > target - height / 1.5) {
      animation.classList.add('is-active');
    }
  });
}
//ロード時に発火
window.addEventListener('load', toggle);

//スクロール時に発火
window.addEventListener('scroll', toggle);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.