Jsのプラグインで起動がされない

jsのプラグインを使って、スクロールに合わせて、背景色が移動した後に文字を表示させたいのですが、今回のコードですとh2は適用されていますがh3に適用されません。
わかる方ご教授お願いします。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta http-equiv="content-type" charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
6    <title></title>
7    <meta name="description" content="">
8    <meta name="keywords" content="">
9    <link rel="stylesheet" href="public/css/index.css">
10    <link rel="stylesheet" href="public/css/all_common.css">
11</head>
12<body>
13  <div id="back" class="aaa"><h2>left to right</h2></div>
14  <div id="back2" class="item-title"><h3>テストテストテスト</h3></div>
15<script src="/public/js/anime.min.js"></script>
16<script src="/public/js/scrollMonitor.js"></script>
17<script src="/public/js/main.js"></script>
18<script src="/public/js/javascript.js"></script>
19</body>
20</html>

CSS
1/*要素にid="back"*/
2  .aaa {
3    display: inline-block;
4    overflow: hidden;
5  }
6  .item-title {
7    overflow: hidden;
8  }
9.block-revealer__element {
10  position: absolute;
11  top: 0;
12  left: 0;
13  width: 100%;
14  height: 100%;
15  background: #000;
16  pointer-events: none;
17  opacity: 0;
18}

js
1(function() {
2  setTimeout(init, 10);
3      function init() {
4          var scrollElemToWatch_1 = document.getElementById('back'),
5          watcher_1 = scrollMonitor.create(scrollElemToWatch_1, -10),				
6          rev1 = new RevealFx(scrollElemToWatch_1, {
7            revealSettings : {
8              bgcolor: '#182524',
9              duration: 300,
10              onStart: function(contentEl, revealerEl) { 
11                anime.remove(contentEl);
12                contentEl.style.opacity = 0; 
13              },
14              onCover: function(contentEl, revealerEl) { 
15                contentEl.style.opacity = 1;
16                anime({
17                  targets: contentEl,
18                  easing: 'easeOutExpo'
19                });
20              }
21            }
22          })
23          watcher_1.enterViewport(function() {
24              rev1.reveal();
25              watcher_1.destroy();
26          });
27      }
28  })();

追記

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta http-equiv="content-type" charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
6    <title></title>
7    <meta name="description" content="">
8    <meta name="keywords" content="">
9    <link rel="stylesheet" href="public/css/index.css">
10    <link rel="stylesheet" href="public/css/all_common.css">
11</head>
12<body>
13  <section>
14    <h3 class="js-scroll"><span class="motion-txt"><span class="motion-inner">SCROLL</span></span></h3>
15    </section>
16    <section>
17    <h3 class="js-scroll"><span class="motion-txt"><span class="motion-inner">SCROLL</span></span></h3>
18    </section>
19    <section>
20    <h3 class="js-scroll"><span class="motion-txt"><span class="motion-inner">SCROLL</span></span></h3>
21    </section>
22    <script src="/public/js/javascript.js"></script>
23</body>
24</html>

CSS
1section{
2  text-align:center;
3  display: flex;
4  justify-content: center;
5  align-items: center;
6  height:100vh;
7  }
8  h3{
9    font-size:40px;
10    padding:10px;
11}
12
13.motion-txt {
14  display: inline-block;
15  position: relative;
16  overflow: hidden;
17  padding:10px;
18}
19.motion-txt:after {
20  content: '';
21  position: absolute;
22  opacity: 1;
23  left: 0;
24  top: 0;
25  bottom: 0;
26  width: 100%;
27  background-color: #000;
28  transform: translate3d(-101%, 0, 0);
29}
30.js-scroll.show .motion-txt:after {
31  transition-property: transform, opacity;
32  transition-duration: 0.5s;
33  transition-delay: 0s;
34  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
35  transform: translate3d(0, 0, 0);
36}
37.js-scroll.done .motion-txt:after {
38  transition-property: transform;
39  transition-duration: 0.5s;
40  transition-delay: 0s;
41  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
42  transform: translate3d(103%, 0, 0);
43}
44.motion-txt .motion-inner {
45  display: inline-block;
46  opacity: 0;
47}
48.js-scroll.done .motion-txt .motion-inner {
49  opacity: 1;
50}

js
1var EffectH = 100;
2$(window).on('scroll load', function() {
3  var scTop = $(this).scrollTop();
4  var scBottom = scTop + $(this).height();
5  var effectPos = scBottom - EffectH;
6  $('.js-scroll').each( function() {
7    var thisPos = $(this).offset().top;
8    if ( thisPos < effectPos ) {
9      $.when(
10        $(this).addClass("show")
11      ).done(function() {
12        $(this).delay(500).queue(function(){
13          $(this).addClass("done")
14        })
15      });
16    }
17  });
18});

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

回答1件

ベストアンサー

そのJavaScriptコードは

JavaScript
1document.getElementById('back')

でid="back"の要素に対してだけ処理を適用しているように見えます。

HTMLは

HTML
1  <div id="back" class="aaa"><h2>left to right</h2></div>
2  <div id="back2" class="item-title"><h3>テストテストテスト</h3></div>

となっていますから、h2を含む<div id="back">に処理が行われますが、h3を含む<div id="back2">に関しては全く関係がありません。

HTML
1  <div id="back">
2    <div class="aaa"><h2>left to right</h2></div>
3    <div class="item-title"><h3>テストテストテスト</h3></div>
4  </div>

としたらどうですか？

投稿2021/10/03 06:13

itagagaki

総合スコア8402

hosoe

2021/10/03 06:23

それそれ別々で、背景が動くようにしたいので、書いていただいたHTMLだとまとめて適用されてしまいます。 h2,h3のclassをbackにしてもh3だけ適用されないのですが、解決方法わかりますか？

itagagaki

2021/10/03 06:30

そのJavaScriptはclassではなくidで対象の要素を選んでいます。 1つのHTML内に、あるidは1つしか許されませんから、そのJavaScriptでは無理です。

hosoe

2021/10/03 06:42

サンプルのサイトだと別々に動いていたのですが、やはりidだとだめなんですね。合わせてご質問になりますが、質問に追記したコードだと複数箇所に指定できるのでしょうか？サンプルをコピーしたのですが、なぜか画面が真っ白になり上手く適用されなくて確認ができませんでした。

itagagaki

2021/10/03 06:51

追記されたコードはJQueryなので <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> をHTMLに加えてください。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

Jsのプラグインで起動がされない

関連した質問