お忙しい中ありがとうございます。
初歩的な質問で大変恐縮ですが、ご回答いただければ幸いです。

前提・実現したいこと

jQueryを使い、各リストがスクロールすると下からふわっとフェードインしてくるものを実装したいです。
jquery-3.5.1.minの読み込みはできています。

下記Webサイトを参考にしましたが、全く動作しない状況です。
https://recooord.org/fadein-window-scroll/
https://web-loid.net/web/scroll-effect-js/

起こっているエラー

コンソールではエラーメッセージは出ておりませんが、
スクロールしても全く動作しません。固定ページのままです。

クラスの指定の問題なのか、そもそも各コードの問題なのかも分かっておりません。

該当のソースコード

html
1  <ul class="list_service">
2              <li class=".js-animation"><img src="images/PC.png">
3                <p class="ttl">ネットリサーチ</p>
4              </li>
5              <li class=".js-animation"><img src="images/shop.png">
6                <p class="ttl">催事場調査</p>
7              </li>
8              <li class=".js-animation"><img src="images/other.png">
9                <p class="ttl">その他の調査</p>
10              </li>
11            </ul>

css
1.list_service {
2  display: flex;
3  justify-content: space-around;
4  flex-wrap: nowrap;
5  align-items: center;
6  margin-top: 60px;
7}
8
9.list_service > li {
10  width: 30%;
11  border: 1px solid;
12}
13
14.list_service img {
15  height: 240px;
16  widows: 240px;
17  display: block;
18  margin: 20px auto;
19}
20
21.list_service .ttl {
22  margin-top: 20px;
23  margin-bottom: 20px;
24  font-size: 1.5em;
25  text-align: center;
26}
27
28/*アニメ*/
29.js-animation {
30  opacity: 0;
31  visibility: hidden;
32  transition: 1s;
33  transform: translateY(30px);
34}
35
36.active {
37  opacity: 1;
38  visibility: visible;
39  transform: translateY(0);
40}
41

js
1$(function () {
2    $(window).on('load scroll', function () {
3      $('.js-animation').each(function () {
4        var target = $(this).offset().top;
5        var scroll = $(window).scrollTop();
6        var height = $(window).height();
7        if (scroll > target - height) {
8          $(this).addClass('active');
9        }
10      });
11    });
12  });

m.ts10806

2021/01/24 03:46

>初心者です。「初心者アイコン」を質問につけるだけにとどめてください。

Pnd01

2021/01/24 03:53

大変失礼しました。タイトルを編集しました。

m.ts10806

2021/01/24 04:00 編集

あと、現在起きている問題は何でしょうか？「何を理解できていないのかご指摘いただければ」とあるのはいいとして、逆に「自分が今このコードをどこまで理解できているか」が書いてないことには指摘という形のアドバイスは得られないと思います。つまるところ「どうなったらこの質問は解決するのか」という点が明示されていません。

Pnd01

2021/01/24 04:15

文章が拙く申し訳ないです。記述のコードでは問題ないと思うのですが、全くスクロールの動作をしません。どこの箇所に問題があるか分からない現状で、質問も分かりづらく失礼しました。

行動規範の内容に同意します

回答1件

ベストアンサー

検証したわけじゃないですが、気になるところだけ

class=".js-animation"

これをクラス名とすると

$('.js-animation').

ではなく

$('..js-animation').と書かなければなりません。
セレクターとしては.を冒頭につけるのが「クラスの」という意味を持ちます。

もちろん、冒頭に.というのは紛らわしいので、
htmlをclass="js-animation"としてJavaScriptはそのままとすることで
一応eachには入ると思います。

デバッグを覚えてください。

js
1
2$(function () {
3    $(window).on('load scroll', function () {
4console.log('load scroll')
5      $('.js-animation').each(function () {
6console.log(this)
7        var target = $(this).offset().top;
8        var scroll = $(window).scrollTop();
9        var height = $(window).height();
10        if (scroll > target - height) {
11          $(this).addClass('active');
12        }
13      });
14    });
15  });