ある要素までスクロールしてその要素が見えた時に、別の要素を出現させたい

前提・実現したいこと

表題のとおりになります。
とある要素が可視範囲に入ったら、別の要素のアニメーションが見えるようにしたいです。

実験中なのですが、いろんなサイトを真似させていただきましたがJSの知識不足で滞っております。。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja" class="no-js">
3<meta charset="UTF-8" />
4<title>デモ</title>
5<link rel="stylesheet" href="/css/style.css">
6
7<body class="fadeout">
8  <div id="circleanime" class="circle"></div>
9
10  <div class="content">ここは見えない</div>
11
12  <div class="last">ここが見えたら発火</div>
13<script src="/js/index.js"></script>
14</body>
15
16</html>

CSS
1.content{
2  height: 100vh;
3  background-color: antiquewhite;
4}
5
6.last{
7  height: 50vh;
8  background-color: aquamarine;
9}
10
11.circle {
12  content: '';
13  position: fixed;
14  right: 10%;
15  top: 10%;
16  border: 1px solid #333;
17  width: 4vw;
18  height: 4vw;
19  border-radius: 50%;
20  opacity: 0;
21  -webkit-animation: 1.5s circleanime infinite;
22          animation: 1.5s circleanime infinite;
23}
24@-webkit-keyframes circleanime {
25  0% {
26    -webkit-transform: scale(0);
27            transform: scale(0);
28  }
29  100% {
30    -webkit-transform: scale(2);
31            transform: scale(2);
32    opacity: 0;
33  }
34}
35
36@keyframes circleanime {
37  0% {
38    -webkit-transform: scale(0);
39            transform: scale(0);
40  }
41  100% {
42    -webkit-transform: scale(2);
43            transform: scale(2);
44    opacity: 0; 最初は見えない
45  }
46}
47
48.circle_on{
49  opacity: 1;
50}
51

JS
1$(function(){
2  $(window).scroll(function (){
3    $("last").each(function(){
4      var imgPos = $(this).offset().top;
5      var scroll = $(window).scrollTop();
6      var windowHeight = $(window).height();
7      if (scroll > imgPos - windowHeight + windowHeight/5){
8        $(this).addClass("circle_on");
9      } else {
10        $(this).removeClass("circle_on");
11      }
12    });
13  });
14});

試したこと

・最初は単純に、スクロール量をある程度取得したら～のパターンでやったのですが、
実際のcodeでは、これが文中のモーダルウィンドウの中身にあたり、高さを取得することが出来ず断念しました。
しかも↑これが文中に何度も出てくるので、高さを指定することが出来ません。
・ならばと思って、この.lastが可視範囲に入ったら、発火という感じでいけないのかな？と思い実験しているところです。

モーダルウィンドウの中で出来ることは限られてるのかなとも思っているのですが、
なかなか私の状況に似た記事を見つけることができませんでした。
難しいでしょうか。

・ローカル環境で開発中
・VScode
・Windows
を使っています。

宜しくお願い致します。

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

回答2件

Intersection Observer をおすすめします。

Intersection Observer API - Web API | MDN

IntersectionObserverを使って要素の交差を検知してアニメーションさせる｜sumi｜note

投稿2021/03/16 03:11

Lhankor_Mhy

総合スコア36928

nomura02

2021/03/16 04:34

早速のお返事、まことにありがとうございます！！！ MDNを読んで、であったことのないものでしたので非常に参考になりました。 TOP？と交差する数字と連携させて、明確な数字をもって動作を起こすことが出来る方法として、後学として覚えておきます！！もとのcodeでどこが間違っていたか分かった方のアンサーを選ばせていただきますが、今回は、非常に勉強になりました！！ありがとうございます！

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

ベストアンサー

スクリプトを見る限り、jQueryを使う、で良いんですかね？

質問内容に書いてあるものをベースにして調整してみました。
HTMLはそのまま、CSSは.circleと.onが両方ついたらopacity: 1;にします。

CSS
1/*
2.circle_on{
3  opacity: 1;
4}
5*/
6
7.circle.on{
8  opacity: 1;
9}

jQuery
1$(function () {
2  $(window).scroll(function () {
3    // セレクタの指定を正しく
4    $('.last').each(function () {
5      var imgPos = $(this).offset().top;
6      var scroll = $(window).scrollTop();
7      var windowHeight = $(window).height();
8      if (scroll > imgPos - windowHeight) {
9        // 条件を満たしたら、.circleに.onを追加
10        $('.circle').addClass('on');
11      }
12    });
13  });
14});

サンプル

.onを付けたり外したりしたい場合は、addClass→toggleClassで。

投稿2021/03/16 03:57

mai1210

総合スコア272

nomura02

2021/03/16 04:37

すみません！！JQueryを使っています！！お手数をおかけしました。。。なるほど、セレクタの指定が間違っていたんですね… toggleClassも教えていただき、ご好意に感謝致します！！これで理想の動作になり勉強になりました！！！ありがとうございます！！

mai1210

2021/03/16 07:02

toggleClassではなく、元のようにelseで分岐してremoveClassの方が想定されている内容のような気がしてきました。挙動確認のうえご調整くださいー

nomura02

2021/03/16 07:44

ありがとうございます！でも参考サイトを真似て作ってる時、このHTMLに何も書いてないはずの「.circle_on」をどうやって動かすんだ、このクラス名はどこからやってきてどこでどう動作するんだと大混乱していたのですが、「// 条件を満たしたら、.circleに.onを追加」して、 .circle.on を形成して、その中に記載してあるopacity:1を出現させるっていうのが、 JS初学者の私にはかなりわかりやすくて、こういう意味が読めるものから着手していきたいので助かりました上記で問題なく動いています！もっとたくさん勉強していきたいと思います！

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

あなたの回答