色々使える―特定の要素が画面に入ったら「active」を付与

WEBのアニメーション効果などでは要素が画面に入った瞬間に効果を見せたいですよね。ページをスクロールして、特定の要素が画面に入ったら、その要素にclass「active」を付与する方法をメモしておきます。

以下のコードを追記することで、「scroll-anime」というclassを持った要素が画面に入ると、「active」というclassを付与してくれます。

jqueryをCDNで読み込み

（WordPressではすでに読み込まれているため不要）
head内、またはbodyの最後などに追記して読み込ませます。

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

jsを追記

bodyの最後などに以下を追記します。

<script>
jQuery(function ($) {
  $(window).on("scroll", function () {
    $(".scroll-anime").each(function () {
      let rect = this.getBoundingClientRect();
      let windowHeight = window.innerHeight;

      if (rect.top < windowHeight && rect.bottom > 0) {
        $(this).addClass("active");
      }
    });
  });
});
</script>

※Wordpressでは「$」がエラーになることがあるため、「jQuery」にしてあります。
アニメーション効果を想定しているため、一度付与されたら「そのまま」になるようになっています。