【装飾】スクロールで紙吹雪

下記Beyondコード

JS head

<!--下記のscriptをタグ設定のheadにカット＆ペーストしてください-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.4.0/dist/confetti.browser.min.js"></script>
<script>
    var sbconfetti_explosion = sbconfetti_explosion || {};
    (function(_) {
        /* 対象のclass */
        const target = ".js-scroll-point";

        _.init = function() {
            const confettiAnime = function() {
                confetti({
                    particleCount: 100,
                    spread: 70,
                    origin: {
                        x: 0,
                        y: 0.7,
                    },
                });
                confetti({
                    particleCount: 100,
                    spread: 70,
                    origin: {
                        x: 1,
                        y: 0.7,
                    },
                });
                confetti({
                    particleCount: 100,
                    spread: 70,
                    origin: {
                        x: 0.5,
                        y: 0.7,
                    },
                });
            };

            //交差した時に発生するコールバック
            const callback = (entries, observer) => {
                entries.forEach((entry) => {
                    if (entry.isIntersecting) {
                        confettiAnime();
                        observer.unobserve(entry.target);
                    }
                });
            };

            const observer = new IntersectionObserver(callback);

            //監視する要素の配列を取得
            const observers = [...document.querySelectorAll(".js-scroll-point")];

            //配列に指定した要素をIntersectionObserverで監視
            observers.forEach((el) => {
                observer.observe(el);
            });
        };
    })(sbconfetti_explosion);
</script>

HTML

<!--   紙吹雪が現れる位置の要素に、クラスjs-scroll-pointをつけてください -->
<div class="confetti_explosion">

    <div class="js-scroll-point"></div>

</div>
<div></div>

CSS

 .confetti_explosion {
  /* 横幅 */
  max-width: 700px;
  /* 文字サイズ */
  font-size: 24px;
  /* 外側の余白|上|左右auto=中央|下| */
  margin: 0 auto 20px;
  width: 100%;
  padding: 2px;
}