JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script>
<a href="#" class="btn">ボタン</a>

<p>スクロール</p><p>スクロール</p><p>スクロール</p><p>スクロール</p><p>スクロール</p><p>スクロール</p><p>スクロール</p><p>スクロール</p><p>スクロール</p><p>スクロール</p><p>スクロール</p><p>スクロール</p><p>スクロール</p><p>スクロール</p><p>スクロール</p><p>スクロール</p><p>スクロール</p><p>スクロール</p><p>スクロール</p><p>スクロール</p><p>スクロール</p>

<div  class="inview">
  <img src="http://placeimg.com/640/480/any" alt="">
</div>

<div class="inview">
  <img src="http://placeimg.com/640/480/animals" alt="">
</div>

<div class="inview">
  <img src="http://placeimg.com/640/480/nature" alt="">
</div>

<p>スクロール</p><p>スクロール</p><p>スクロール</p><p>スクロール</p><p>スクロール</p><p>スクロール</p><p>スクロール</p><p>スクロール</p><p>スクロール</p><p>スクロール</p><p>スクロール</p><p>スクロール</p><p>スクロール</p><p>スクロール</p><p>スクロール</p><p>スクロール</p><p>スクロール</p><p>スクロール</p><p>スクロール</p><p>スクロール</p><p>スクロール</p>

CSS

.inview {
  opacity: 0;
  transition: opacity 1s;
}
.inview.is-visible {
  opacity: 1;
}


.btn {
  display: inline-block;
  background-color:pink;
  border-radius: 5px;
  color: #fff;
  padding: 10px;
}

JavaScript

$(function(){
	$('.inview').on('inview', function(ev, isInView){

      if(isInView) {
        $(this).addClass('is-visible');
      }

    });
});