https://shigakogen-ski.or.jp/winter/assets/js/fuwa.js

1/*
2スクロール出現
3（「.offs」が付いた要素に対して、表示領域に入ったら「.ons」にクラスを変更する。）
4・判定タイミング：対象がブラウザの下から 30%以上 入ったら実行、画面から出たら戻す
5*/
6// スクロール出現用関数（.offs ⇄ .ons）
7function scr_ani(scr, offs_max) {
8  var window_h = $(window).height(),
9    offs_length = $(".offs").length,
10    ons_length = $(".ons").length;
11  if (offs_length) {
12    var first_item = offs_max - offs_length;
13    for (var i = 0; i < offs_length; i++) {
14      var data_scr = first_item + i;
15      var offs = $('.offs[data-scr="' + data_scr + '"]');
16      var target = offs.offset().top;
17      var trigger = target - (window_h + scr - window_h * 0.3);
18      if (trigger < 0) {
19        offs.removeClass("offs").addClass("ons");
20      } else {
21        break;
22      }
23    }
24  }
25  if (ons_length) {
26    var last_item = ons_length - 1;
27    for (var i = 0; i < ons_length; i++) {
28      var data_scr = last_item - i;
29      var ons = $('.ons[data-scr="' + data_scr + '"]');
30      var target = ons.offset().top;
31      var trigger = target - (window_h + scr);
32      if (trigger > 0) {
33        ons.removeClass("ons").addClass("offs");
34      } else {
35        break;
36      }
37    }
38  }
39}
40
41$(function () {
42  /*
43  スクロール出現
44  */
45  var scr = $(window).scrollTop();
46  // スクロール出現アイテムにナンバリング
47  var offs_max = $(".offs").length;
48  for (var i = 0; i < offs_max; i++) {
49    $(".offs").eq(i).attr("data-scr", i);
50  }
51
52  scr_ani(scr, offs_max);
53
54  /************
55  スクロール時
56  ************/
57  $(window).on("scroll", function () {
58    var scr = $(window).scrollTop();
59    /*
60    スクロール出現
61    */
62    scr_ani(scr, offs_max);
63  }); // end scroll
64}); // end function