scriptのスクロール処理が効かない

実現したいこと

スクロールしたら画像がフェードインするようにしたいです。

発生している問題・分からないこと

他サイトでのコードを参考に、色々としてみたのですが、script部分ののスクロールしたら表示するコードが何故か効きません。

該当のソースコード

html、css、JavaScript
1<!doctype html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8" />
6    <meta name="robots" content="noindex,nofollow" />
7    <meta name="viewport" content="width=device-width, initial-scale=1" />
8    <!-- <link rel="stylesheet" href="https://plot-hub.com/code_example/lib/css/reset.css"> -->
9    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/destyle.css@4.0.1/destyle.min.css">
10    <script src="https://kit.fontawesome.com/78355c9515.js" crossorigin="anonymous"></script>
11
12    <style media="screen">
13/*----------------------------
14scroll_up ｜下から上へ出現
15----------------------------*/
16.scroll_up {
17  transition: 0.8s ease-in-out;
18  transform: translateY(30px);
19  opacity: 0;
20}
21.on {
22  transform: translateY(0);
23  opacity: 1.0;
24}
25
26/*----------------------------
27scroll_left ｜左から出現
28----------------------------*/
29.scroll_left {
30    -webkit-transition: 0.8s ease-in-out;
31    -moz-transition: 0.8s ease-in-out;
32    -o-transition: 0.8s ease-in-out;
33    transition: 0.8s ease-in-out;
34    transform: translateX(-30px);
35    opacity: 0;
36    filter: alpha(opacity=0);
37    -moz-opacity: 0;
38}
39.on {
40    opacity: 1.0;
41    filter: alpha(opacity=100);
42    -moz-opacity: 1.0;
43    transform: translateX(0);
44}
45
46/*----------------------------
47scroll_right ｜右から出現
48----------------------------*/
49.scroll_right {
50    -webkit-transition: 0.8s ease-in-out;
51    -moz-transition: 0.8s ease-in-out;
52    -o-transition: 0.8s ease-in-out;
53    transition: 0.8s ease-in-out;
54    transform: translateX(30px);
55    opacity: 0;
56    filter: alpha(opacity=0);
57    -moz-opacity: 0;
58}
59.on {
60    opacity: 1.0;
61    filter: alpha(opacity=100);
62    -moz-opacity: 1.0;
63    transform: translateX(0);
64}
65/*------------------------*/
66/*------------------------*/
67/*------- layout -------*/
68.box {
69  width: 80%;
70  max-width: 300px;
71  margin: 0 auto;
72  padding: 10vw;
73  list-style: none;
74}
75li {
76  margin-bottom: 400px;
77  }
78li img {
79    max-width: 100%;
80  }
81
82/*------- base -------*/
83body {
84  font-family: "Yu Gothic Medium", "游ゴシック Medium", "游ゴシック", "YuGothic", "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo", "メイリオ", sans-serif;
85  font-size: 16px;
86  color: #333;
87  padding-bottom: 200px;
88}
89h1, h2, h3, h4, h5, h6, p, ul, li {
90  margin:0;
91  font-weight: normal;
92}
93p {
94  margin: 30vw auto 40vw;
95  color: #555;
96  font-family: 'Marcellus', serif;
97  font-size: 2.0rem;
98  text-align: center;
99}
100p::after {
101    content: '\f063';
102    display: block;
103    font-family: "Font Awesome 5 Free";
104    font-weight: 700;
105    font-size: 1.2rem;
106    padding-top: 10px;
107  }
108
109ul {
110    display: block;
111    list-style-type: disc;
112    margin-block-start: 0;
113    margin-block-end: 0;
114    margin-inline-start: 0;
115    margin-inline-end: 0;
116    padding-inline-start: 0;
117}
118    </style>
119</head>
120
121<body>
122
123<p>SCROLL DOWN</p>
124<ul class="box">
125  <li class="scroll_up"><img src="https://dl.dropbox.com/s/u7oy8t9i29br79c/20210620.jpg?dl=0" alt=""></li>
126  <li class="scroll_left"><img src="https://dl.dropbox.com/s/u7oy8t9i29br79c/20210620.jpg?dl=0" alt=""></li>
127  <li class="scroll_right"><img src="https://dl.dropbox.com/s/u7oy8t9i29br79c/20210620.jpg?dl=0" alt=""></li>
128</ul>
129
130
131    <script>
132//scroll_effect
133$(window).scroll(function () {
134  var scrollAnimationElm = document.querySelectorAll('.scroll_up , .scroll_left , .scroll_right');
135  var scrollAnimationFunc = function () {
136    for (var i = 0; i < scrollAnimationElm.length; i++) {
137      var triggerMargin = 150;
138      if (window.innerHeight > scrollAnimationElm[i].getBoundingClientRect().top + triggerMargin) {
139        scrollAnimationElm[i].classList.add('on');
140      }
141    }
142  }
143  window.addEventListener('load', scrollAnimationFunc);
144  window.addEventListener('scroll', scrollAnimationFunc);
145});
146    </script>
147
148
149</body>
150
151</html>