https://kartie.jp/points/js/scroll-animation.js

1/**
2 * Scroll Animation Component
3 * .sa-hidden クラスを持つ要素がビューポートに入ると
4 * .sa-visible に切り替えてアニメーション発火
5 *
6 * 使い方:
7 * 1. scroll-animation.css を読み込む
8 * 2. scroll-animation.js を読み込む
9 * 3. アニメーションしたい要素に以下のクラスを付与:
10 *    - sa-hidden（必須：初期非表示）
11 *    - sa-fade-up / sa-fade-down / sa-fade-left / sa-fade-right / sa-fade-in / sa-scale-in（アニメ種別）
12 *    - sa-delay-1 〜 sa-delay-6（オプション：stagger用ディレイ）
13 */
14(function () {
15  'use strict';
16
17  var targets = document.querySelectorAll('.sa-hidden');
18  if (targets.length === 0) return;
19
20  // IntersectionObserver 対応チェック
21  if (!('IntersectionObserver' in window)) {
22    // 非対応ブラウザ → 全部表示
23    Array.prototype.forEach.call(targets, function (el) {
24      el.classList.remove('sa-hidden');
25      el.classList.add('sa-visible');
26    });
27    return;
28  }
29
30  var observer = new IntersectionObserver(function (entries) {
31    entries.forEach(function (entry) {
32      if (entry.isIntersecting) {
33        entry.target.classList.remove('sa-hidden');
34        entry.target.classList.add('sa-visible');
35        observer.unobserve(entry.target); // 一度だけ発火
36      }
37    });
38  }, {
39    threshold: 0.15,    // 15%見えたら発火
40    rootMargin: '0px 0px -40px 0px' // 少し手前で発火
41  });
42
43  Array.prototype.forEach.call(targets, function (el) {
44    observer.observe(el);
45  });
46
47})();