jQueryが正常に作動しない。

前提・実現したいこと

<実現したい事>
jQueryが正常に作動するようにしたい。

<前提>

上記でポップが上がるし、読み込みはできているようだが、

発生している問題・エラーメッセージ

jQueryが正常に作動しない。

sectionに到達した際に画像アニメーションが動くようにしたいが、
URLに飛んですぐ動いてしまう。

HTML
1  <body>
2    <div class="wrapper">
3    <div class="fullPageScroll">
4~(中略）
5      <section id="section1" class="section section1">
6        <h1>Company Profile</h1>
7        <div class="img-wrap">
8          <img src="/Users/~/image.jpg">
9        </div>
10　　　　</section>
11~(中略）
12    </div>
13    </div>
14  </body>

CSS
1.section3 {
2    background-color: white;
3    position: relative;
4  }
5
6  .section3 h1 {
7    position: absolute;
8    left: 16%;
9    top: 7%;
10    text-align: center;
11    font-size: 3em;
12    font-family: 'Raleway', sans-serif;
13  }
14
15  .section1 img {
16    display: block;
17    width: 40%;
18    height: 100vh;
19    float: right;
20  }
21
22  .img-wrap {
23    overflow: hidden;
24    position: relative;
25  }
26
27  .img-wrap:before {
28    animation: img-wrap 2s cubic-bezier(.4, 0, .2, 1) forwards;
29    background: #fff;
30    bottom: 0;
31    content: '';
32    left: 0;
33    pointer-events: none;
34    position: absolute;
35    right: 0;
36    top: 0;
37    z-index: 1;
38  }
39
40  @keyframes img-wrap {
41    100% {
42      transform: translateX(-100%);
43    }
44  }

JS
1  // スムーススクロール
2  const paginations = document.querySelectorAll(".pagination a");
3  paginations.forEach(pagination => {
4    pagination.addEventListener("click", e => {
5      e.preventDefault();
6      const targetId = e.target.hash;
7      const target = document.querySelector(targetId);
8      target.scrollIntoView({ behavior: "smooth" });
9    });
10  });
11
12  // Intersection Observer
13  const sections = document.querySelectorAll(".section");
14  const observerRoot = document.querySelector(".fullPageScroll");
15  const options = {
16    root: observerRoot,
17    rootMargin: "-50% 0px",
18    threshold: 0
19  };
20
21
22  /**
23   * 交差したときに呼び出す関数
24   * @param entries - IntersectionObserverEntry IntersectionObserverが交差したときに渡されるオブジェクトです。
25   */
26  function doWhenIntersect(entries) {
27    entries.forEach(entry => {
28      if (entry.isIntersecting) {
29        activatePagination(entry.target);
30      }
31    });
32  };
33
34  /**
35   * ページネーションの大きさを変える関数
36   * @param element - HTMLElement 現在表示中のスライドのHTML要素を引数に取ります。
37   */
38  function activatePagination(element) {
39    const currentActiveIndex = document.querySelector(
40      "#pagination .active"
41    );
42    if (currentActiveIndex !== null) {
43      currentActiveIndex.classList.remove("active");
44    }
45    const newActiveIndex = document.querySelector(
46      `a[href='#${element.id}']`
47    );
48    newActiveIndex.classList.add("active");
49  };
50
51
52  $(window).scroll(function() {
53    var windowHeight = $(window).height(100);
54    topWindow = $(window).scrollTop(),
55    targetPosition = $("section3").offset().top;
56    const image = document.querySelectorAll('.img-wrap');
57
58    const observer = new IntersectionObserver(function(entries) {
59      entries.forEach(function(entry) {
60        if (entry.intersectionRatio > 0) {
61          entry.target.classList.add('img-animation');
62        } else {
63          entry.target.classList.remove('img-animation');
64        }
65      });
66    });
67
68
69    Array.prototype.forEach.call(image, function(img) {
70      observer.observe(img);
71    });
72  });

試したこと

head内の読み込みの順番を変更

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>xxxx</title>
    <link rel=stylesheet type="text/css" href="style.css">
    <script src="/Users/xxxx/Desktop/KK/js/jquery-3.5.0.js"></script>
    <script src="/Users/xxxx/Desktop/KK/js/fullpage.js"></script>
    <script src="/Users/xxxx/Desktop/KK/js/test.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@1,200&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200&display=swap" rel="stylesheet">
  </head>

scriptでの対応

    <script>
    $('.gnavCont a').click(function(){
      $('#navToggle').prop('checked', false);
    })
    </script>

上記のハンバーガーメニューのリンクをクリックしたら
メニューが閉じるはscriptなら正常に作動。

  $(window).scroll(function() {
    var windowHeight = $(window).height(100);
    topWindow = $(window).scrollTop(),
    targetPosition = $("section3").offset().top;
    const image = document.querySelectorAll('.img-wrap');

    const observer = new IntersectionObserver(function(entries) {
      entries.forEach(function(entry) {
        if (entry.intersectionRatio > 0) {
          entry.target.classList.add('img-animation');
        } else {
          entry.target.classList.remove('img-animation');
        }
      });
    });


    Array.prototype.forEach.call(image, function(img) {
      observer.observe(img);
    });
  });

こっちはscriptで入れてもダメ.....

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

yambejp

2020/05/01 12:30

「sectionに到達した際」とはどういう状況ですか？ sectionがはるか下の方にあって、スクロールしてわずかでも見えたらなのか、所定の範囲までみえたらなのか？それともなにか判断基準があるのか・・・またその条件から外れたときに処理をとめるのか全体的に何をしたいかわかりません

rrgsn

2020/05/01 12:47

スクロール量ではなく、画像が可視範囲に入ってから作動をしたいです。 https://firstlayout.net/css-animation-of-images/ このサイトのスクロールアニメーションの部分を参考にしております。

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

回答2件

ベストアンサー

こんにちは、scrollのスクリプトだけ書いてみました。

jQuery
1$("section3").offset().top;

がおかしいんじゃないかとおもいます。

jQuery
1$("#section3").offset().top

script
1$(function () {
2    $(window).scroll(function () {
3        var windowHeight = $(window).height();
4        (topWindow = $(window).scrollTop()), (targetPosition = $("#section3").offset().top);
5        const image = document.querySelectorAll(".img-wrap");
6
7        const observer = new IntersectionObserver(function (entries) {
8            entries.forEach(function (entry) {
9                if (entry.intersectionRatio > 0) {
10                    console.log(0);
11                    entry.target.classList.add("img-animation");
12                } else {
13                    console.log(1);
14                    entry.target.classList.remove("img-animation");
15                }
16            });
17        });
18
19        Array.prototype.forEach.call(image, function (img) {
20            observer.observe(img);
21        });
22    });
23});
24

投稿2020/05/10 03:56

fake_shibe

総合スコア806

たとえばこうすればよいのでは？

投稿2020/05/01 13:03

yambejp

総合スコア116835

yambejp

2020/05/01 13:03

$(function(){ $(window).on('scroll',function(){ var win_top=window.pageYOffset; var win_bottom=win_top+window.innerHeight; var obj_top=parseInt($('#section1').offset().top); var obj_bottom=parseInt(obj_top+$('#section1').height()); console.log([win_top,win_bottom,obj_top,obj_bottom]); }); });

rrgsn

2020/05/01 13:13

申し訳ございません、初心者で恐縮なのですがこちらはどうなる仕様なのでしょうか... test.jsに記載はしてみたものの、変化もなく... 前提としてjqueryが正常に作動していない問題があるので、そちらを先に解決しないとアニメーションまではいけないようです...

yambejp

2020/05/01 13:16

ウィンドウの表示位置とオブジェクトの位置を表示していますウィンドウのtop/bottomの間に、オブジェクトのtop/bottomのいずれかまたは両方が入ったときに発動してください

rrgsn

2020/05/01 13:46

なるほど,,,, 作動はしないので、引き続き問題点調査します...... <script>で囲んでhtmlに記載した場合、正常に作動したケースもありましたが、 ~.js上での記載だとうまく作動しない原因は何が考えられるでしょうか....