<ul class="wrapper">
  <li class="fadeInUp"><img src="http://mias.kilo.jp/material/photo/img01.jpg" alt=""></li>
  <li class="fadeInUp"><img src="http://mias.kilo.jp/material/photo/img02.jpg" alt=""></li>
  <li class="fadeInUp"><img src="http://mias.kilo.jp/material/photo/img03.jpg" alt=""></li>
  <li class="fadeInUp"><img src="http://mias.kilo.jp/material/photo/img04.jpg" alt=""></li>
  <li class="fadeInUp"><img src="http://mias.kilo.jp/material/photo/img01.jpg" alt=""></li>
  <li class="fadeInUp"><img src="http://mias.kilo.jp/material/photo/img02.jpg" alt=""></li>
</ul>
.wrapper{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 750px;
  margin: 0 auto;
  padding: 50px 25px;
}
li{
  width: 48%;
  margin: 0 0 100px;
}
img{
  width: 100%;
  height: auto;
}
.fadeInUp {
  opacity : 0;
  transform: translateY(20px);
  transition: 1s;
}
$(function(){
  function animation(){
    $('.fadeInUp').each(function(){
      //ターゲットの位置を取得
      var target = $(this).offset().top;
      //スクロール量を取得
      var scroll = $(window).scrollTop();
      //ウィンドウの高さを取得
      var windowHeight = $(window).height();
      //ターゲットまでスクロールするとフェードインする
      if (scroll > target - windowHeight){
        $(this).css('opacity','1');
        $(this).css('transform','translateY(0)');
      }
    });
  }
	animation();
  $(window).scroll(function (){
    animation();
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js