JSFiddle - React, Tailwind, and code Playground

by utsuki

HTML

<section>
  <h1>スクロールしください</h1>
  <div>
    <img src="https://memorandum20.xsrv.jp/wp-content/uploads/2019/10/autumn-leaves.jpg" class="fadein" alt="">
  </div>
</section>

CSS

section {
  margin: 0 auto 100px;
}

h1 {
  padding: 0.5em;
  background: #faa;
  color: #fff;
  text-align: center;
}

div {
  margin-top: 300px;
  text-align: center;
}

.fadein {
 opacity: 0;
  transform: translateY(50px);
  transition: all 1s;
 
}

.move {
  transform: translateY(0);
  opacity: 1;
}

JavaScript

$(window).scroll(function () {
  $('.fadein').each(function () {
    var window_height = $(window).height();
    var scroll_top = $(window).scrollTop();
    var element_position = $(this).offset().top;
    if (scroll_top > element_position - window_height + 100) {
      $(this).addClass('move');
    }
    if (scroll_top < 100) {
        $(this).removeClass('move');
      }
  });
});