<h1>スクロールテスト</h1>
<p>スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
</p>
<ul class="scroll">
  <li class="fade_in"><figure>
    <figcaption>フェードイン</figcaption>
    <img src="https://www.instagram.com/p/Bg3qtU9ls-A/media/?size=l">
    </figure></li> 

  <li class="up"><figure>
    <figcaption>上に移動</figcaption>
    <img src="https://www.instagram.com/p/Bg3qtU9ls-A/media/?size=l">
    </figure></li> 

  <li class="side"><figure>
    <figcaption>横に移動</figcaption>
    <img src="https://www.instagram.com/p/Bg3qtU9ls-A/media/?size=l">
    </figure></li> 
<p>スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  </p>

</ul>

h1, p {
  text-align: center;
}

.scroll {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 0;
}

.scroll li {
  list-style: none;
  transition: 0.5s;
  margin: 0 0 50px;
}

.scroll img {
  width: 100%;
  margin: 10px 0 0 ;
}

.scroll figcaption {
  text-align: center;
}

.scroll .fade_in {
  opacity: 0;  
}

.scroll .fade_in_anime {
  opacity: 1;  
}

.scroll .up {
  transform: translate(0,50px); 
  -webkit-transform: translate(0,50px); 
  opacity: 0;  
}

.scroll .up_anime {
  transform: translate(0,0); 
  -webkit-transform: translate(0,0); 
  opacity: 1;  
}

.scroll .side {
  transform: translate(50px,0); 
  -webkit-transform: translate(50px,0);
  opacity: 0;  
}

.scroll .side_anime {
  transform: translate(0,0); 
  -webkit-transform: translate(0,0);
  opacity: 1;  
}

$(function() {
  
  $('.fade_in').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
    if (isInView) {
      $(this).addClass('fade_in_anime');
    } else {     $(this).removeClass('fade_in_anime');
    }
  });

    $('.up').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
    if (isInView) {
      $(this).addClass('up_anime');
    } else {
      $(this).removeClass('up_anime');
    }
  });

    $('.side').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
    if (isInView) {
      $(this).addClass('side_anime');
    } else {
      $(this).removeClass('side_anime');
    }
  });



});