<div class="player"></div>
<div class="player"></div>
<div class="player"></div>
<div class="player"></div>
<div class="player"></div>
.player {
  margin: 30vh 0;
  padding: 3em;
  color: white;
  background-color: black;
  transition: opacity .2s ease;
}

.player::before {
  content: 'playing';
}

.-is-leaving {
  opacity: .5;
}

.-is-leaving::before {
  content: 'paused';
}
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    entry.target.classList.toggle(
      '-is-leaving',
      entry.intersectionRatio < 1
    )
  })
}, { threshold: [0, 1] })

document
  .querySelectorAll('.player')
  .forEach(player => observer.observe(player))
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.