アニメーションがスクロールしたら発火するようにしたいが、うまくいきません

実現したいこと

WEBサイトコーディング初心者です。
シャッ（CSS） | 動くWebデザインアイディア帳
このサイトを参考にHTMLとCSSを書きました。
そのアニメーションがスクロールしたら発火するようにしたいのですが思わしい結果が得られません。
最低限のコードを載せますので、ほかも必要であればおっしゃってください。

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

ChatGTPでJSのコードを書いてもらいました。
ページのロード時に発火してしまいます。
スクロールして表示されたら発火するようにしたいです。
（コードには要素から下部20px以上スクロールしたら表示されるよう設定しました）

該当のソースコード

HTML
1<div class="bgextend bgLRextend scroll-trigger">
2         <div class="love">
3              　<p class="bgappear">『愛してる』を、知りたいのです。</p>
4          </div>
5</div>

CSS
1.love {
2    text-align: center;
3    font-size: 22px;
4    line-height: 0;
5    font-weight: bold;
6    color: #746761;
7  }
8  
9  .bgextend{
10    animation-name:bgextendAnimeBase;
11    animation-duration:1s;
12    animation-fill-mode:forwards;
13    position: relative;
14    overflow: hidden;/*　はみ出た色要素を隠す　*/
15    opacity:0;
16  }
17  
18  @keyframes bgextendAnimeBase{
19    from {
20      opacity:0;
21    }
22  
23    to {
24      opacity:1;  
25  }
26  }
27  
28  /*中の要素*/
29  .bgappear{
30    animation-name:bgextendAnimeSecond;
31    animation-duration:1s;
32    animation-delay: 0.6s;
33    animation-fill-mode:forwards;
34    opacity: 0;
35  }
36  
37  @keyframes bgextendAnimeSecond{
38    0% {
39    opacity: 0;
40    }
41    100% {
42    opacity: 1;
43  }
44  }
45  
46  /*--------- 左から --------*/
47  .bgLRextend::before{
48    animation-name:bgLRextendAnime;
49    animation-duration:1s;
50    animation-fill-mode:forwards;
51      content: "";
52      position: absolute;
53      width: 100%;
54      height: 100%;
55      background-color: #666;/*伸びる背景色の設定*/
56  }
57  @keyframes bgLRextendAnime{
58    0% {
59      transform-origin:left;
60      transform:scaleX(0);
61    }
62    50% {
63      transform-origin:left;
64      transform:scaleX(1);
65    }
66    50.001% {
67      transform-origin:right;
68    }
69    100% {
70      transform-origin:right;
71      transform:scaleX(0);
72    }
73  }
74

jQuery（どちらか一方書く）
1$(document).ready(function() {
2  var scrollTrigger = $('.scroll-trigger');
3
4  function handleScroll() {
5    var scrollY = $(window).scrollTop();
6
7    // 20px以上スクロールしたらクラスを追加
8    if (scrollY >= 20) {
9      // アニメーションが終了したらfinishedクラスを追加
10      function animationEndHandler() {
11        scrollTrigger.addClass('finished');
12        // イベントリスナーを一度だけ実行するために削除
13        scrollTrigger.off('animationend', animationEndHandler);
14      }
15
16      // アニメーションが終了している場合は直ちに処理を実行
17      if (scrollTrigger.hasClass('scrolled')) {
18        animationEndHandler();
19      } else {
20        // アニメーションを開始
21        scrollTrigger.addClass('scrolled');
22        // アニメーションが終了したらfinishedクラスを追加
23        scrollTrigger.on('animationend', animationEndHandler);
24      }
25    }
26  }
27
28  // スクロール時にイベントを発火
29  $(window).scroll(handleScroll);
30});

window.addEventListener('load', function () {
  var scrollTrigger = document.querySelector('.scroll-trigger');

  function handleScroll() {
    var scrollY = window.scrollY || window.pageYOffset;

    // 20px以上スクロールしたらクラスを追加
    if (scrollY >= 20) {
      // アニメーションが終了したらfinishedクラスを追加
      function animationEndHandler() {
        scrollTrigger.classList.add('finished');
        // イベントリスナーを一度だけ実行するために削除
        scrollTrigger.removeEventListener('animationend', animationEndHandler);
      }

      // アニメーションが終了している場合は直ちに処理を実行
      if (scrollTrigger.classList.contains('scrolled')) {
        animationEndHandler();
      } else {
        // アニメーションを開始
        scrollTrigger.classList.add('scrolled');
        // アニメーションが終了したらfinishedクラスを追加
        scrollTrigger.addEventListener('animationend', animationEndHandler);
      }
    }
  }

  // スクロール時にイベントを発火
  window.addEventListener('scroll', function () {
    // 遅延を加えることで、load イベント発火後にスクロールイベントの監視が始まる
    setTimeout(handleScroll, 50);
  });
});

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

修正を何回かかけましたが、何度やってもページのロード時に発火してしまいます。

補足

特になし

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

回答2件

こうするとどうでしょうか。
サンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/ucbo9pwy/

css
1 .love {
2    text-align: center;
3    font-size: 22px;
4    line-height: 0;
5    font-weight: bold;
6    color: #746761;
7}
8
9.bgextend {
10    position: relative;
11    overflow: hidden;
12    /*　はみ出た色要素を隠す　*/
13    opacity: 0;
14}
15
16/*中の要素*/
17.bgappear {
18    opacity: 0;
19}
20
21/*--------- 左から --------*/
22.bgLRextend::before {
23    content: "";
24    position: absolute;
25    width: 100%;
26    height: 100%;
27    background-color: #666;
28    /*伸びる背景色の設定*/
29}
30
31@keyframes bgextendAnimeBase {
32    from {
33        opacity: 0;
34    }
35
36    to {
37        opacity: 1;
38    }
39}
40
41@keyframes bgextendAnimeSecond {
42    0% {
43        opacity: 0;
44    }
45
46    100% {
47        opacity: 1;
48    }
49}
50
51@keyframes bgLRextendAnime {
52    0% {
53        transform-origin: left;
54        transform: scaleX(0);
55    }
56
57    50% {
58        transform-origin: left;
59        transform: scaleX(1);
60    }
61
62    50.001% {
63        transform-origin: right;
64    }
65
66    100% {
67        transform-origin: right;
68        transform: scaleX(0);
69    }
70}
71
72
73.scrolled {
74    &.bgextend {
75        animation-name: bgextendAnimeBase;
76        animation-duration: 1s;
77        animation-fill-mode: forwards;
78    }
79
80    /*中の要素*/
81    .bgappear {
82        animation-name: bgextendAnimeSecond;
83        animation-duration: 1s;
84        animation-delay: 0.6s;
85        animation-fill-mode: forwards;
86    }
87
88    &.bgLRextend::before {
89        animation-name: bgLRextendAnime;
90        animation-duration: 1s;
91        animation-fill-mode: forwards;
92    }
93
94}

投稿2024/01/24 10:02

編集2024/01/24 10:11

Lhankor_Mhy

総合スコア37413

unineko1145

2024/01/24 21:30

回答ありがとうございます。試してみましたが解決できませんでした。実際のサイトではべーじの下部にあって、実装されている部分で更新するとスクロールしたら出るのですが、トップから読み込むといつからはわかりかねますが、スクロールするより早く発火してしまいます。 HTMLに原因があるのでしょうか。

Lhankor_Mhy

2024/01/25 00:10

質問では「スクロールしたら発火するよう」となっていましたが、もしかしてご希望の動作は「スクロールして要素が画面内に入ったら」というものなのでしょうか？そうであるならば、質問にその旨を記述しないと、読む人には伝わらないのではないでしょうか。

unineko1145

2024/01/25 00:42 編集

おっしゃる通りです。修正しました。

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

ベストアンサー

bgextendのCSSが微妙ですねとりあえずscroll-triggerに寄せれば良さそうです
あとはIntersectionObserverで交差を判断してクラスのつけ外しをしてください
（今回画面外に出たときには初期状態にもどしてあります）

javascript
1<style>
2.love {
3    text-align: center;
4    font-size: 22px;
5    line-height: 0;
6    font-weight: bold;
7    color: #746761;
8  }
9  .bgappear{
10    animation-name:bgextendAnimeSecond;
11    animation-duration:1s;
12    animation-fill-mode:forwards;
13    opacity: 0;
14  }
15  @keyframes bgextendAnimeSecond{
16    0% {opacity: 0;}
17    100% {opacity: 1;}
18  }
19.bgLRextend::before{
20    animation-name:bgLRextendAnime;
21    animation-duration:1s;
22    animation-fill-mode:forwards;
23    content: "";
24    position: absolute;
25    width: 100%;
26    height: 100%;
27    background-color: #666;
28}
29@keyframes bgLRextendAnime{
30    0% {
31      transform-origin:left;
32      transform:scaleX(0);
33    }
34    50% {
35      transform-origin:left;
36      transform:scaleX(1);
37    }
38    50.001% {
39      transform-origin:right;
40    }
41    100% {
42      transform-origin:right;
43      transform:scaleX(0);
44    }
45}
46.scroll-trigger{
47  position: relative;
48  overflow: hidden;
49}  
50.scroll-trigger p{
51  opacity:0;
52}
53.dummy{
54  height:120%;  
55}
56</style>
57<script>
58window.addEventListener('scroll',()=>{
59  const target=document.querySelector('.scroll-trigger');
60  const observer = new IntersectionObserver(changes=>{
61    for (let change of changes) {
62      if(change.intersectionRatio > 0){
63        change.target.classList.add('bgLRextend');
64      }else{
65        change.target.classList.remove('bgLRextend');
66        document.querySelector('.bgappear')?.classList.remove('bgappear');
67      }
68    }
69  });
70  observer.observe(target);
71  target.addEventListener('animationend',()=>{
72    target.querySelector('p').classList.add('bgappear');
73  });
74});
75</script>
76
77<div class="dummy">&nbsp;</div>
78<div class="scroll-trigger">
79  <div class="love">
80    <p>『愛してる』を、知りたいのです。</p>
81  </div>
82</div>
83<div class="dummy">&nbsp;</div>