JSFiddle - React, Tailwind, and code Playground

https://teratail.com/questions/319409

by Lhankor_Mhy

HTML

↓スクロール
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="target">
<img src="http://placehold.jp/24/eeeeee/cccccc/150x100.png?text=" alt="">
</div>

CSS

body{
  background: gray;
}
div{
  position: relative;
  width: max-content;
  overflow: hidden
}
img{
  display: block;
}
div::before{
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 200%;
  background: linear-gradient(white 70%, transparent 100%);
  transition: 1.5s;
}
div.active::before{
  transform: translateY(-100%);
}

JavaScript

const observer = new IntersectionObserver(entries=>{
  entries.forEach(entry=>{
    if (entry.isIntersecting){
      entry.target.classList.add('active');
    }
  })
},{threshold: 1.0});
observer.observe(document.querySelector('#target'));