<div class="box"></div>

<div class="space"></div>

<div class="box"></div>



<script src="https://cdn.jsdelivr.net/npm/in-view@0.6.1/dist/in-view.min.js"></script>

<script>
inView.offset(100);
inView('.box')
    .on('enter', el=>{
      //入ったとき
      el.classList.add('is-in')
    })
    .on('exit', el => {
         //出たとき
        el.classList.remove('is-in')
    })
</script>

 
.box{
  height: 150px;
  width: 100%;
  background:#333;
  color: #FFF;
  opacity: .5;
  
  
}
.is-in{
  background: #f44336;
  transition: all .5s;
  opacity: 1;
}

.space{
  height: 800px;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.