3秒後+可視範囲でClassを付与した場合、そのままの動きとなりましたが、
この状態+3秒待たずにスクロール可視状態になったらClassを付与させたい。

また、box発火後、img1→img2→img3と順番にclassを付与させてみましたが、なんか違う...ような気がします。
頑張ってみましたが、うまいやり方はありますでしょうか？

何卒よろしくお願いいたしますm(__)m

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
<style>
#loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #000;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}
.spinner {
    width: 960px;
    height: 448px;
    margin: 0 auto;
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
}
@keyframes sk-scaleout {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1.0);
    opacity: 0;
  }
}
.loaded {
  opacity: 0;
  visibility: hidden;
}
.isMove { display: none;}
.isMove.mask2 { display: block;}
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  max-width: 700px;
  height: auto;
  margin: 0 auto;
  padding: 40px 0;
}
.box {
  width: 100%;
  height: 200px;
  margin: 0 0 2% 0;
  overflow: hidden;
}
.boxInner {
  width: inherit;
  height: inherit;
  line-height: 200px;
  font-size: 1.5em;
  text-align: center;
  color: #555;
  opacity: 0;
}
.isPlay {
  animation-name: play;
  animation-duration: .5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  position: relative;
  opacity: 1 !important;
}
.isPlay:before {
  animation-name: maskOut;
  animation-duration: .5s;
  animation-delay: .5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: #000;
}
@keyframes play {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes maskOut {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}
.Vd.isPlay {
  animation-name: play2;
  animation-duration: .5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  position: relative;
  opacity: 1;
}
.Vd.isPlay:before {
  animation-name: maskOut2;
  animation-duration: .5s;
  animation-delay: .5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-: #000;
}
@keyframes play2 {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes maskOut2 {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}
.conInr .box {
    width: max-content;
  height: auto;
  margin: 0 0 0 0;
  overflow: hidden;
}
.conInr .box img {
    width: 100%;
}
.conInr,
.conInr .boxInner {
    position: relative;
    padding-bottom: 60%;
    width: 100%;}
.img1,
.img2,
.img3,
.img4,
.img5 {
    position: absolute !important;
    overflow: hidden;
  opacity: 0;}
.img1.isPlay {
    width: 90%;
    left: 0;
    right: 0;
    margin: 0 auto;
  opacity: 1;
}
.img2.isPlay {
    width: 50%;
    right: 2%;
    top: 55%;
}
.img3.isPlay {
    width: 40%;
    left: 2%;
    top: 55%;
}
.img4.isPlay {
    width: 100%;
}
.img5.isPlay {
    width: 30%;
    left: 15%;
    top: 30%;
}
.boxImg4 {
    position: absolute !important;
    width: 20% !important;
    right: 2%;
    top: 5%;
    overflow: hidden !important;
    height: 0;
    padding-bottom: 14%;}
</style>
</head>
<body>
<div class="wrapper">
  <div id="loading">
   <div class="spinner">
    <svg viewBox="0 0 0 1" class="mask" id="movie" >
     <mask id="clip">
      <g id="mask"></g>
     </mask>
     <image xlink:href="hoge.svg" width="100%" height="100%" mask="url(#clip)"></image>
    </svg>
   </div>
  </div>
<main>
<section>
<div class="container">
  <div class="box">
    <div class="boxInner">Lorem Ipsum</div>
    <div class="boxInner">Lorem Ipsum</div>
    <div class="boxInner">Lorem Ipsum</div>
  </div>
  <div class="box">
    <div class="boxInner">Lorem Ipsum</div>
  </div>
  <div class="box">
    <div class="boxInner">Lorem Ipsum</div>
  </div>
  <div class="box">
    <div class="boxInner">Lorem Ipsum</div>
  </div>
</div>
</section>
<section>
 <svg viewBox="0 0 0 2" class="isMovie" id="move" >
  <mask id="clipMask">
   <g id="mask"></g>
   </mask>
   <image xlink:href="huga.svg" width="100%" height="100%" mask="url(#clipMask)"></image>
 </svg>
 <div class=" ">
  <div class="conInr">
   <div class="box">
     <div class="img1"><img src="http://into-the-program.com/demo/images/sample001.jpg" alt=""></div>
   </div>
   <div class="box">
     <div class="img2"><img src="http://into-the-program.com/demo/images/sample002.jpg" alt=""></div>
   </div>
   <div class="box">
     <div class="Vd img3"><img src="http://into-the-program.com/demo/images/sample003.jpg" alt=""></div>
   </div>
   <div class="box">
     <div class="Vd img4 boxImg4"><img src="http://into-the-program.com/demo/images/sample004.jpg" alt=""></div>
   </div>
   <div class="box">
     <div class="img5"><img src="http://into-the-program.com/demo/images/sample005.jpg" alt=""></div>
   </div>
  </div>
 </div>
</section>
</main>
</div>

<script src="https://cdn.jsdelivr.net/npm/vivus@latest/dist/vivus.min.js"></script>
<script>
        window.onload = function () {
            setTimeout(() => {
                const spinner = document.getElementById('loading');
                spinner.classList.add('loaded');
                boxShow();
                MovieShow();
                box1Show();
                box2Show();
                box3Show();
                box4Show();
                box5Show();
                $(window).on('scroll', function () { boxShow(); });
                $(window).on('scroll', function () { MovieShow(); });
                $(window).on('scroll', function () { box1Show(); });
                $(window).on('scroll', function () { box2Show(); });
                $(window).on('scroll', function () { box3Show(); });
                $(window).on('scroll', function () { box4Show(); });
                $(window).on('scroll', function () { box5Show(); });
            }, 3000);
        }
        function boxShow() {
	  var elem = $('.boxInner');
	  elem.each(function () {
	    var isPlay = 'isPlay';
	    var elemOffset = $(this).offset().top;
	    var scrollPos = $(window).scrollTop();
	    var wh = $(window).height();
	    if(scrollPos > elemOffset - wh + (wh / 10)){
	      $(this).addClass(isPlay);
	    }
	  });
        }

        function MovieShow() {
	  var elem = $('.isMovie');
	  elem.each(function () {
	    var isMovie = 'isMovie';
	    var elemOffset = $(this).offset().top;
	    var scrollPos = $(window).scrollTop();
	    var wh = $(window).height();
	    if(scrollPos > elemOffset - wh + (wh / 10)){
	      $(this).attr("class", "mask2");
		  new Vivus('move', {
		    type: 'oneByOne',
		    start: 'inViewport',
		    duration: 180,
		    forceRender: false,
		    animTimingFunction: Vivus.LINEAR,
		  });
	    }
	  });
        }
        function box1Show() {
            setTimeout(() => {
		  var elem = $('.img1');
		  elem.each(function () {
		    var isPlay = 'isPlay';
		    var elemOffset = $(this).offset().top;
		    var scrollPos = $(window).scrollTop();
		    var wh = $(window).height();
		    if(scrollPos > elemOffset - wh + (wh / 10)){
		      $(this).addClass(isPlay);
		    }
		  });
            }, 2800);
        }
        function box2Show() {
            setTimeout(() => {
		  var elem = $('.img2');
		  elem.each(function () {
		    var isPlay = 'isPlay';
		    var elemOffset = $(this).offset().top;
		    var scrollPos = $(window).scrollTop();
		    var wh = $(window).height();
		    if(scrollPos > elemOffset - wh + (wh / 10)){
		      $(this).addClass(isPlay);
		    }
		  });
            }, 3000);
        }
        function box3Show() {
            setTimeout(() => {
		  var elem = $('.img3');
		  elem.each(function () {
		    var isPlay = 'isPlay';
		    var elemOffset = $(this).offset().top;
		    var scrollPos = $(window).scrollTop();
		    var wh = $(window).height();
		    if(scrollPos > elemOffset - wh + (wh / 10)){
		      $(this).addClass(isPlay);
		    }
		  });
            }, 3200);
        }
        function box4Show() {
            setTimeout(() => {
		  var elem = $('.img4');
		  elem.each(function () {
		    var isPlay = 'isPlay';
		    var elemOffset = $(this).offset().top;
		    var scrollPos = $(window).scrollTop();
		    var wh = $(window).height();
		    if(scrollPos > elemOffset - wh + (wh / 10)){
		      $(this).addClass(isPlay);
		    }
		  });
            }, 3400);
        }
        function box5Show() {
            setTimeout(() => {
		  var elem = $('.img5');
		  elem.each(function () {
		    var isPlay = 'isPlay';
		    var elemOffset = $(this).offset().top;
		    var scrollPos = $(window).scrollTop();
		    var wh = $(window).height();
		    if(scrollPos > elemOffset - wh + (wh / 10)){
		      $(this).addClass(isPlay);
		    }
		  });
            }, 3600);
        }

        new Vivus('movie', {
            type: 'oneByOne',
            start: 'inViewport',
            duration: 180,
            forceRender: false,
            animTimingFunction: Vivus.LINEAR,
        });
</script>

</body>
</html>

Lhankor_Mhy

2021/06/01 08:52

「なんか違う」というのは、動作のことですか？

wing283

2021/06/01 09:22

たとえば、img1とimg2が可視範囲にある場合img3にはclassが付与されません。次にimg3が可視範囲に入った場合より3300ms後にclassの付与が行われます。 3300ms後に順番に付与しないのはなぜでしょうか。。

Lhankor_Mhy

2021/06/01 09:27

「順番に付与」というのは、img3が可視範囲に入った場合にimg1もやり直したい、みたいな話ですか？

wing283

2021/06/01 09:59

やり直さないです。そのまま表示します。 img3のみが可視範囲に入っている場合、img1とimg2が先に発火し最後にimg3が発火したいです。

Lhankor_Mhy

2021/06/01 10:03

そのまま表示する、とのことですが、そうすると「img1とimg2が先に発火」とは具体的には何が起きる想定ですか？

wing283

2021/06/01 10:17 編集

伝え間違えました。上から順にという意味でした。 img3のみが可視範囲に入っている場合、img1とimg2が先にisPlayの付与、最後にimg3にisPlayの付与になります。

Lhankor_Mhy

2021/06/01 11:16

ちょっとイメージがわからないので、少し考えてみます。

wing283

2021/06/01 12:59

すみません、ありがとうございますm(_ _)m

Lhankor_Mhy

2021/06/02 00:46

つまり、img1 img2 img3 のいずれかひとつでもビューポートに入った時に、img1 img2 img3 の順で表示する、という意味ですか？

wing283

2021/06/02 01:11

その通りです。

Lhankor_Mhy

2021/06/02 01:14

問題を把握しました。

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

回答1件

ベストアンサー

この状態+3秒待たずにスクロール可視状態になったらClassを付与させたい。

setTimeout()を消せばいいと思いますよ。

また、box発火後、img1→img2→img3と順番にclassを付与させてみましたが、なんか違う...ような気がします。

ビューポート内にあるかどうかの判定と、表示部分の処理を、同じループで書いていますが、これを別のループにするのがいいでしょう。

コメントを受けて追記

大幅にコードを変えてしまって申し訳ないのですが、こちらはいかがでしょうか。

js
1        window.onload = function () {
2            setTimeout(() => {
3                const spinner = document.getElementById('loading');
4                spinner.classList.add('loaded');
5                boxShow();
6                box_Show();
7                $(window).on('scroll', function () {
8                    boxShow();
9                });
10                $(window).on('scroll', function () {
11                    box_Show();
12                });
13            }, 3000);
14        }
15
16
17
18        function boxShow() {
19            var box = $('.box');
20            var isPlay = 'isPlay';
21            box.each(function () {
22                var boxOffset = $(this).offset().top;
23                var scrollPos = $(window).scrollTop();
24                var wh = $(window).height();
25                if (scrollPos > boxOffset - wh + (wh / 10)) {
26                    $(this).addClass('isPlay');
27                } else {
28                }
29            });
30        }
31
32        function box_Show() {
33            setTimeout(() => {
34                var scrollTop = $(this).scrollTop();
35                var scrollBottom = scrollTop + $(this).height();
36                $(".img").each(function (i) {
37                    var boxOffset = $(this).offset().top;
38                    var scrollPos = $(window).scrollTop();
39                    var wh = $(window).height();
40                    if (scrollPos > boxOffset - wh + (wh / 10)) {
41                        var target = this;
42                        setTimeout(function () {
43                            $(target).addClass("isPlay");
44                        }, 100 * i);
45                    }
46                });
47            }, 300);
48        }
49

コメントを受けて追記

失礼ながら、コードのみ追記します。

js
1        window.onload = function () {
2            setTimeout(() => {
3                const spinner = document.getElementById('loading');
4                spinner.classList.add('loaded');
5                boxShow();
6                MovieShow();
7                $(window).on('scroll', function () { boxShow(); });
8                $(window).on('scroll', function () { MovieShow(); });
9            }, 3000);
10        }
11        function boxShow() {
12            var elem = $('.boxInner');
13            elem.each(function () {
14                var isPlay = 'isPlay';
15                var elemOffset = $(this).offset().top;
16                var scrollPos = $(window).scrollTop();
17                var wh = $(window).height();
18                if (scrollPos > elemOffset - wh + (wh / 10)) {
19                    $(this).addClass(isPlay);
20                }
21            });
22        }
23
24        function MovieShow() {
25            var elem = $('.isMovie');
26            elem.each(function () {
27                $(this).attr("class", "mask2");
28                new Vivus('move', {
29                    type: 'oneByOne',
30                    start: 'inViewport',
31                    duration: 180,
32                    forceRender: false,
33                    animTimingFunction: Vivus.LINEAR,
34                }, () => {
35                    box1Show();
36                    box2Show();
37                    box3Show();
38                    box4Show();
39                    box5Show();
40
41                });
42            });
43        }
44        function box1Show() {
45            setTimeout(() => {
46                var elem = $('.img1');
47                elem.each(function () {
48                    var isPlay = 'isPlay';
49                    $(this).addClass(isPlay);
50                });
51            }, 200);
52        }
53        function box2Show() {
54            setTimeout(() => {
55                var elem = $('.img2');
56                elem.each(function () {
57                    var isPlay = 'isPlay';
58                    $(this).addClass(isPlay);
59                });
60            }, 400);
61        }
62        function box3Show() {
63            setTimeout(() => {
64                var elem = $('.img3');
65                elem.each(function () {
66                    var isPlay = 'isPlay';
67                    $(this).addClass(isPlay);
68                });
69            }, 600);
70        }
71        function box4Show() {
72            setTimeout(() => {
73                var elem = $('.img4');
74                elem.each(function () {
75                    var isPlay = 'isPlay';
76                    $(this).addClass(isPlay);
77                });
78            }, 800);
79        }
80        function box5Show() {
81            setTimeout(() => {
82                var elem = $('.img5');
83                elem.each(function () {
84                    var isPlay = 'isPlay';
85                    $(this).addClass(isPlay);
86                });
87            }, 1000);
88        }
89
90        new Vivus('movie', {
91            type: 'oneByOne',
92            start: 'inViewport',
93            duration: 180,
94            forceRender: false,
95            animTimingFunction: Vivus.LINEAR,
96        });

投稿2021/06/02 02:00

編集2021/06/04 09:40

Lhankor_Mhy

総合スコア36960

wing283

2021/06/02 03:04

ありがとうございます。コードを追加させていただきました。最初にローディング時間があるため、初動3秒間はマストになります。問題点としてはスクロールし可視状態に入った際に3秒間待たないといけないという点になります。

Lhankor_Mhy

2021/06/02 03:47

では、load と scroll を分ければいいのでは。

Lhankor_Mhy

2021/06/02 03:49

ついでに言えば、img1→img2→img3 の処理は、img1、img2、img3をチェックするのではなくて、.box_ をチェックした方がいいんじゃないかな、とも思います。

wing283

2021/06/02 04:10

分け...ますか...。そうなるとローディング終了前にisPlayが付与されてしまいます。 3秒間のローディングがあるのでローディング終了後にisPlayを付与したいのです。

Lhankor_Mhy

2021/06/02 04:32

ですので、load と scroll を分け、load イベントの方だけ3秒待てばいいと思います。

wing283

2021/06/02 04:58

box_が可視状態でリロードした場合、ローディング終了前にisPlayが付与されてしまいます。

Lhankor_Mhy

2021/06/02 06:13

当方の環境では問題が再現しませんでした。どのようなコードでその問題が起きていますか？

wing283

2021/06/02 06:21

Lhankor_Mhy

2021/06/02 06:27

上記コードを試してみましたが、「box_にローディング終了前にisPlayが付与」という現象を確認できませんでした。何が違うんだろ……？

Lhankor_Mhy

2021/06/02 06:35

もしかして、ローディング中にスクロールしてるとか？

wing283

2021/06/02 07:40

ローディング中は何もしていません... うーん...

Lhankor_Mhy

2021/06/02 08:07

ご提示のコードでサンプルを作ってみました。 https://jsfiddle.net/Lhankor_Mhy/r6acb8pz/ 上記ページで、「box_にローディング終了前にisPlayが付与」という問題は再現しますか？

wing283

2021/06/02 08:23

なるほど、ありがとうございます。ページ上部からスクロールする分には一見問題ないのですが、ページ下部でリロードする（上部には戻らず下部でとどまる）と「box_にローディング終了前にisPlayが付与」します。ちなみにローカルで作業・確認していますが、サーバーに乗っけても問題が再現できています。

wing283

2021/06/02 08:24

サンプルのRANですとページトップに戻ってしまうので、右クリック→フレームを再読み込み　するとわかりやすいかもです。

Lhankor_Mhy

2021/06/02 08:29

なるほど、そういうことですか。問題を把握しました。

Lhankor_Mhy

2021/06/02 08:35

追記しましたので、ご確認ください。

wing283

2021/06/02 09:23

ローディングしたらboxShow、box_Showを読み込み実行させるイメージでしょうか。なるほど！！変更していただいたコードでやってみたいと思います！長い時間やり取りしていただき本当にありがとうございます！

Lhankor_Mhy

2021/06/03 05:14

お役に立てたようで何よりです。 img1、img2、img3の方を解決するのをすっかり忘れていたのですが、大丈夫でしたでしょうか……

wing283

2021/06/04 05:12 編集

ありがとうございます！そうですね...実はそちらも課題となっております。 img1の前にSVGアニメーションを入れたりしなければならなかったりします。。 SVGか終わってからimg1→img2→img3・・・と次々に画像が出てくる感じです。頂いたコードにMovieShowを追加して3秒後にSVGアニメーションが始まる仕様にはできましたが、スクロールをするとMovieShowとbo1_Showが同時に始まってしまいます。 MovieShow後から始まるimg1～動きが難しいです。 MovieShowの中にbo1_Showを入れて、MovieShowが読み込んだらbo1_Showが始まるようにすればよいのかと思い、以下のようにしてみましたが解決できずです。 <script> window.onload = function () { setTimeout(() => { const spinner = document.getElementById('loading'); spinner.classList.add('loaded'); boxShow(); $(window).on('scroll', function () { boxShow(); }); MovieShow(); $(window).on('scroll', function () { MovieShow(); }); box1Show(); $(window).on('scroll', function () { box1Show(); }); box2Show(); $(window).on('scroll', function () { box2Show(); }); box3Show(); $(window).on('scroll', function () { box3Show(); }); box4Show(); $(window).on('scroll', function () { box4Show(); }); box5Show(); $(window).on('scroll', function () { box5Show(); }); }, 3000); } function boxShow() { var elem = $('.boxInner'); elem.each(function () { var isPlay = 'isPlay'; var elemOffset = $(this).offset().top; var scrollPos = $(window).scrollTop(); var wh = $(window).height(); if(scrollPos > elemOffset - wh + (wh / 10)){ $(this).addClass(isPlay); } }); } function MovieShow() { var elem = $('.isMovie'); elem.each(function () { var isMovie = 'isMovie'; var elemOffset = $(this).offset().top; var scrollPos = $(window).scrollTop(); var wh = $(window).height(); if(scrollPos > elemOffset - wh + (wh / 10)){ $(this).attr("class", "mask2"); new Vivus('move', { type: 'oneByOne', start: 'inViewport', duration: 180, forceRender: false, animTimingFunction: Vivus.LINEAR, }); } }); } function box1Show() { setTimeout(() => { var elem = $('.img1'); elem.each(function () { var isPlay = 'isPlay'; var elemOffset = $(this).offset().top; var scrollPos = $(window).scrollTop(); var wh = $(window).height(); if(scrollPos > elemOffset - wh + (wh / 10)){ $(this).addClass(isPlay); } }); }, 2800); } function box2Show() { setTimeout(() => { var elem = $('.img2'); elem.each(function () { var isPlay = 'isPlay'; var elemOffset = $(this).offset().top; var scrollPos = $(window).scrollTop(); var wh = $(window).height(); if(scrollPos > elemOffset - wh + (wh / 10)){ $(this).addClass(isPlay); } }); }, 3000); } function box3Show() { setTimeout(() => { var elem = $('.img3'); elem.each(function () { var isPlay = 'isPlay'; var elemOffset = $(this).offset().top; var scrollPos = $(window).scrollTop(); var wh = $(window).height(); if(scrollPos > elemOffset - wh + (wh / 10)){ $(this).addClass(isPlay); } }); }, 3200); } function box4Show() { setTimeout(() => { var elem = $('.img4'); elem.each(function () { var isPlay = 'isPlay'; var elemOffset = $(this).offset().top; var scrollPos = $(window).scrollTop(); var wh = $(window).height(); if(scrollPos > elemOffset - wh + (wh / 10)){ $(this).addClass(isPlay); } }); }, 3400); } function box5Show() { setTimeout(() => { var elem = $('.img5'); elem.each(function () { var isPlay = 'isPlay'; var elemOffset = $(this).offset().top; var scrollPos = $(window).scrollTop(); var wh = $(window).height(); if(scrollPos > elemOffset - wh + (wh / 10)){ $(this).addClass(isPlay); } }); }, 3600); } </script> <script src="https://cdn.jsdelivr.net/npm/vivus@latest/dist/vivus.min.js"></script> <script> new Vivus('movie', { type: 'oneByOne', start: 'inViewport', duration: 180, forceRender: false, animTimingFunction: Vivus.LINEAR, }); </script> という感じです。

Lhankor_Mhy

2021/06/04 00:57

Vivus というライブラリを使っているのですね。 GitHub を見てきましたが、コールバックを受けるようなので、お試しになってはいかがでしょうか？ https://github.com/maxwellito/vivus#play-method-callback

wing283

2021/06/04 03:48

ありがとうございます。試してみましたがよくわかりませんでした(-_-;)

Lhankor_Mhy

2021/06/04 03:57

解決方法はなんとなくわかるのですが、ご提示いただいているのがコードの断片なので、ふんわりとしか答えられないです。お悩みでしたら、第三者にも再現可能なコードを作って、別質問を立てていただいた方がよさそうですね。

Lhankor_Mhy

2021/06/04 03:58

ふんわりとしたご助言だけでよろしければ、こちらでも大丈夫ですが。

wing283

2021/06/04 05:23

先のjsコードに全体で設定しているjsコードを追加させていただきました。そもそもbox1Show～box5Showで表示時間の設定をしていることが間違っていると自覚はしています...。元のソース<div class="box box_">の次に<svg>を読み込み、MovieShow（svg）完了後(2800ms)からbox1Show～box5Showを表示させていく感じです。現在の全体のソース＆コードを見ていただきたいですがここでは難しく(>_<)

wing283

2021/06/04 05:26

ですが、元のソースを変更させていただきます。。

wing283

2021/06/04 05:40

恐れ入ります、ソースを変更させていただきました。よろしくお願いいたします(>_<)

Lhankor_Mhy

2021/06/04 05:43

かしこまりました。すみませんが、お時間をいただきたく。

wing283

2021/06/04 06:03

もちろんです！すみません、何卒よろしくお願いいたしますm(__)m

Lhankor_Mhy

2021/06/04 09:41

追記しました。

wing283

2021/06/04 10:09

すごい！！完璧です！！ Vivusの個所にstart: 'inViewport',を入れて表示させてbox1Show～box5Showを表示させていく！考え方は合っていましたが書き方が全くわかっていませんでした。何から何までありがとうございます＞＜よく見て理解していきたいと思います＞＜本当にありがとうございます！

Lhankor_Mhy

2021/06/04 10:11

お役に立てたようで何よりです。今気づきましたが、↓これはいらないかもですね。 $(window).on('scroll', function () { MovieShow(); });

wing283

2021/06/04 10:30

確かに削除しても動きました。ありがとうございます(>_<)

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