https://sake-suehiro.co.jp/suehiro_admin/wp-content/themes/suehiro/js/scrollanime.js

1$(function () {
2	$(window).scroll(function () {
3		const wHeight = $(window).height();
4		const scrollAmount = $(window).scrollTop();
5		$('.scrollanime').each(function () {
6			const targetPosition = $(this).offset().top;
7			if(scrollAmount > targetPosition - wHeight + 100) {
8				$(this).addClass("fadeInDown");
9			}
10		});
11		$('.c-img_scale').each(function () {
12			const targetPosition = $(this).offset().top;
13			if(scrollAmount > targetPosition - wHeight + 100) {
14				$(this).addClass("is-act");
15			}
16		});
17		$('.fadein').each(function () {
18			const targetPosition = $(this).offset().top;
19			if(scrollAmount > targetPosition - wHeight + 100) {
20				$(function(){
21                    $('.fadein').each(function(i){
22                        $(this).delay(i * 800).queue(function(){
23                            $(this).addClass('active');
24                        });
25                    });
26                });
27			}
28		});
29	});
30});
31
32// eachTextAnimeにappeartextというクラス名を付ける定義
33function EachTextAnimeControl() {
34  $('.eachTextAnime').each(function () {
35    var elemPos = $(this).offset().top - 10;
36    var scroll = $(window).scrollTop();
37    var windowHeight = $(window).height();
38    if (scroll >= elemPos - windowHeight) {
39      $(this).addClass("appeartext");
40
41    } else {
42      //$(this).removeClass("appeartext");
43    }
44  });
45}
46
47// 画面をスクロールをしたら動かしたい場合の記述
48$(window).scroll(function () {
49  EachTextAnimeControl();/* アニメーション用の関数を呼ぶ*/
50});// ここまで画面をスクロールをしたら動かしたい場合の記述
51
52// 画面が読み込まれたらすぐに動かしたい場合の記述
53$(window).on('load', function () {
54  //spanタグを追加する
55  var element = $(".eachTextAnime");
56  element.each(function () {
57    var text = $(this).text();
58    var textbox = "";
59    text.split('').forEach(function (t, i) {
60      if (t !== " ") {
61        if (i < 10) {
62          textbox += '<span style="animation-delay:.' + i + 's;">' + t + '</span>';
63        } else {
64          var n = i / 10;
65          textbox += '<span style="animation-delay:' + n + 's;">' + t + '</span>';
66        }
67
68      } else {
69        textbox += t;
70      }
71    });
72    $(this).html(textbox);
73  });
74
75  EachTextAnimeControl();/* アニメーション用の関数を呼ぶ*/
76});// ここまで画面が読み込まれたらすぐに動かしたい場合の記述