https://c-pet.jp/js/textEffect.js

1/*
2スクロール出現
3*/
4// スクロール出現用関数（.offs ⇄ .ons）
5function scr_ani(scr, offs_max) {
6  var window_h = $(window).height(),
7    offs_length = $(".offs").length,
8    ons_length = $(".ons").length,
9    wh_pos = 3; // 対象コンテンツの上端が画面下からどれくらい入ったら反応するか。画面高さに対する割合（%）
10  if (offs_length) {
11    var first_item = offs_max - offs_length;
12    for (var i = 0; i < offs_length; i++) {
13      var data_scr = first_item + i;
14      var offs = $('.offs[data-scr="' + data_scr + '"]');
15      var target = offs.offset().top;
16      var trigger = target - (window_h + scr - (window_h * wh_pos) / 100);
17      if (trigger < 0) {
18        offs.removeClass("offs").addClass("ons");
19      } else {
20        break;
21      }
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      if (ons_length) {
42    var last_item = ons_length - 1;
43    for (var i = 0; i < ons_length; i++) {
44      var data_scr = last_item - i;
45      var ons = $('.ons[data-scr="' + data_scr + '"]');
46      var target = ons.offset().top;
47      var trigger = target - (window_h + scr);
48
49    }
50  }
51    
52}
53
54$(function () {
55  // スクロール出現アイテムにナンバリング
56  var offs_max = $(".offs").length;
57  for (var i = 0; i < offs_max; i++) {
58    $(".offs").eq(i).attr("data-scr", i);
59  }
60  // ディレイを設定
61  var fadeIn_item = $(".fadeIn_item");
62  for (var i = 0; i < fadeIn_item.length; i++) {
63    let delay = fadeIn_item.eq(i).data("delay");
64    if (delay) {
65      fadeIn_item.eq(i).css("transition-delay", delay + "s");
66    }
67  }
68
69  // （リロード時など）ロード時にすでにスクロールされている場合に対応
70  var scr = $(window).scrollTop();
71  scr_ani(scr, offs_max);
72
73  /************
74  スクロール時
75  ************/
76  $(window).on("scroll", function () {
77    var scr = $(window).scrollTop();
78    scr_ani(scr, offs_max);
79  }); // end scroll
80});
81