【jQuery不要】軽量JS「in-view.js」でスクロール連動イベントを簡単実装

by interlife

HTML

<p>「inview.js」は画面に入ったらすぐに<br>「in-view.js」は画面に入ってから100pxスクロールすると実行されます。<br>↓↓↓↓↓↓↓↓↓↓↓↓↓↓</p>
<div class="container">
  <!-- ① 通常（すぐ発火） -->
  <div class="box box-gray js-inview">
    <span>inview.js</span><br>（すぐ出る）
  </div>
  
  <!-- ② オフセットあり（100px遅延） -->
  <div class="box box-pink js-in-view">
    <span>in-view.js</span><br>（100px待つ）
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/in-view.min.js"></script>

SCSS

.container {
  margin: 100vh 0; 
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 100px; /* 間隔を広めに */
  background: #1565c0;
}

/* ボックスの共通スタイル */
.box {
  width: 200px;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: bold;
  border-radius: 10px;
  
  /* アニメーション設定（初期状態） */
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease;
}

/* ① 通常ボックス（実線・グレー） */
.box-gray {
  border: 4px solid #555;
  background-color: #f0f0f0;
  color: #333;
}

/* ② 遅延ボックス（点線・ピンク） */
.box-pink {
  border: 4px dashed #e91e63;
  background-color: #fff0f5;
  color: #e91e63;
}

/* ③ 完全表示ボックス（二重線・青） */
.box-blue {
  border: 6px double #2196f3;
  background-color: #e3f2fd;
  color: #1565c0;
}

/* 画面内に入った時に付与するクラス */
.is-show {
  opacity: 1;
  transform: translateY(0);
}

JavaScript

//inview.jsのscript jQuery必要
$(function(){
 $('.js-inview').on('inview', function (event, isInView) {
  if (isInView) {
   $(this).addClass('is-show');
  }
 });
});

//in-view.jsのscript jQuery不要
inView.offset(100);
inView('.js-in-view')
.on('enter', el => {
 el.classList.add('is-show');
});