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

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

ただいまの
回答率

88.11%

jQueryが作動しない:特定のsectionに到達した時点でアニメーションを作動させたい。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 493

score 9

前提・実現したいこと

セクション毎で画像やテキストのアニメーションを作動させたい。

ユーザーが各セクションの可視範囲までスクロールした場合に、
テキストや画像のアニメーションを作動させたいです。

現状だと、ページそのものを叩いた状態で、すぐ作動してしまいます。

fullpage.jsを利用しているので、そのせいでうまく作動していないのかもしれません....。

以下サイトのようなイメージです。
https://firstlayout.net/css-animation-of-images/

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

サイトを表示した際にすぐ、アニメーションが作動してしまう。

該当のソースコード

  <body>
    <div class="wrapper">
    <div class="fullPageScroll">
~(中略)
      <section id="section1" class="section section1">
        <h1>Company Profile</h1>
        <div class="img-wrap">
          <img src="/Users/~/image.jpg">
        </div>
    </section>
~(中略)
    </div>
    </div>
  </body>
  .section3 {
    background-color: white;
    position: relative;
  }

  .section3 h1 {
    position: absolute;
    left: 16%;
    top: 7%;
    text-align: center;
    font-size: 3em;
    font-family: 'Raleway', sans-serif;
  }

  .section1 img {
    display: block;
    width: 40%;
    height: 100vh;
    float: right;
  }

  .img-wrap {
    overflow: hidden;
    position: relative;
  }

  .img-wrap:before {
    animation: img-wrap 2s cubic-bezier(.4, 0, .2, 1) forwards;
    background: #fff;
    bottom: 0;
    content: '';
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
  }

  @keyframes img-wrap {
    100% {
      transform: translateX(-100%);
    }
  }

※当方ビギナーな為、念の為JSのコード全記載いたします。

  // スムーススクロール
  const paginations = document.querySelectorAll(".pagination a");
  paginations.forEach(pagination => {
    pagination.addEventListener("click", e => {
      e.preventDefault();
      const targetId = e.target.hash;
      const target = document.querySelector(targetId);
      target.scrollIntoView({ behavior: "smooth" });
    });
  });

  // Intersection Observer
  const sections = document.querySelectorAll(".section");
  const observerRoot = document.querySelector(".fullPageScroll");
  const options = {
    root: observerRoot,
    rootMargin: "-50% 0px",
    threshold: 0
  };


  /**
   * 交差したときに呼び出す関数
   * @param entries - IntersectionObserverEntry IntersectionObserverが交差したときに渡されるオブジェクトです。
   */
  function doWhenIntersect(entries) {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        activatePagination(entry.target);
      }
    });
  };

  /**
   * ページネーションの大きさを変える関数
   * @param element - HTMLElement 現在表示中のスライドのHTML要素を引数に取ります。
   */
  function activatePagination(element) {
    const currentActiveIndex = document.querySelector(
      "#pagination .active"
    );
    if (currentActiveIndex !== null) {
      currentActiveIndex.classList.remove("active");
    }
    const newActiveIndex = document.querySelector(
      `a[href='#${element.id}']`
    );
    newActiveIndex.classList.add("active");
  };


  $(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);
    });
  });

試したこと

各サイトを調べ、試行錯誤したが解決せず。
http://weboook.blog22.fc2.com/blog-entry-415.html
https://sole-color-blog.com/blog/1237/

$(window).on('load', function() {
  var observer = new IntersectionObserver(function(entries, observer) {
    if (entries[0].intersectionRatio > 0) {
      observer.unobserve(entries[0].target);
      $(entries[0].target).addClass('active');
    }
  });

  $('.scroll-animation').each(function(index, element) {
    observer.observe(element);
  });
});


https://teratail.com/questions/209344
上記の質問で似たような事象があったので、試したのですが、うまく行かず...

<script type="text/javascript">
$(document).ready(function(){
alert("jQueryファイルの読み込み完了でーす。");
});
</script>
ポップアップが表示され
読み込みをしていることは確認

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

js/jquery-3.5.0.min.js
fullPage 3.0.8

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

こんにちは。
サンプルを作りました。JavaScript と CSS を少し変更しています。
(削除したものが別の部分のコードで必要であるならば、適宜復元してください)

サンプル

  $(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);
    });
  });

↑を↓に変更。

    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);
    });

  .img-animation:before {

↑を↓に変更。

  .img-wrap:before {

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 88.11%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る