Create boxes with different visibility triggers

by interlife

HTML

<div class="container">
  <!-- ① 通常（すぐ発火） -->
  <div class="box box-gray js-observer-default">
    <span>パターン1</span><br>（すぐ出る）
  </div>
  
  <!-- ② オフセットあり（100px遅延） -->
  <div class="box box-pink js-observer-offset">
    <span>パターン2</span><br>（100px待つ）
  </div>

  <!-- ③ 完全表示（要素全体が画面に入りきったら） -->
  <div class="box box-blue js-observer-threshold">
    <span>パターン3</span><br>（要素全体が画面に入りきったら）
  </div>
</div>