SCSS

by maya tominaga

HTML

<div class="content">
  <img class="image" src="https://www.pakutaso.com/shared/img/thumb/TSURU170308-057_TP_V.jpg" alt="サンプル">
  <img class="image" src="https://www.pakutaso.com/shared/img/thumb/TSURU170308-049_TP_V.jpg" alt="サンプル">
  <img class="image" src="https://www.pakutaso.com/shared/img/thumb/TSURU170308-054_TP_V.jpg" alt="サンプル">
  <img class="image" src="https://www.pakutaso.com/shared/img/thumb/TSURU170308-050_TP_V.jpg" alt="サンプル">
  <img class="image" src="https://www.pakutaso.com/shared/img/thumb/TSURU170308-051_TP_V.jpg" alt="サンプル">
  <img class="image" src="https://www.pakutaso.com/shared/img/thumb/TSURU170308-046_TP_V.jpg" alt="サンプル">
</div>

SCSS

.content {
  height: 1000px;
}

.image {
  width: 350px;
  display: block;
  opacity: 0;
  margin-bottom: 250px;
  
  &:last-child {
    margin-bottom: 10px;
  }
  
  &.show {
    opacity: 1;
    transition: opacity 0.5s ease-in;
  }
}

JavaScript

const options = {
	root: null,
  rootMargin: '5px',
  threshold: 0.5
}

const obs = new IntersectionObserver(showIntersect, options)

const imgs = document.querySelectorAll('.image')
imgs.forEach(img => obs.observe(img))

function showIntersect(changes) {
	changes.forEach(change => {
  	if (change.isIntersecting) {
    	change.target.classList.add('show');
    }
  })
}