https://angelicaaster.com/js/background_sp.js

1document.addEventListener('DOMContentLoaded', () => {
2    if (window.innerWidth <= 600) { // スマホ版のみ実行
3        const images = document.querySelectorAll('#background-container-sp .bg-image');
4        const scrollSteps = [1000, 2500, 3500, 4500]; // 各背景画像ごとのスクロール距離（スマホ版）
5
6        let currentImageIndex = 0;
7
8        function updateBackground() {
9            const scrollPosition = window.scrollY;
10
11            // 新しいインデックスを計算
12            let newIndex = scrollSteps.findIndex(step => scrollPosition < step);
13
14            if (newIndex === -1) {
15                newIndex = scrollSteps.length - 1; // 最後の画像が表示されるように調整
16            }
17
18            if (newIndex !== currentImageIndex) {
19                images[currentImageIndex].classList.remove('active');
20                images[currentImageIndex].classList.add('fade-out');
21
22                currentImageIndex = newIndex;
23
24                images[currentImageIndex].classList.remove('fade-out');
25                images[currentImageIndex].classList.add('active');
26            }
27        }
28

29        window.addEventListener('scroll', updateBackground);
30        images[currentImageIndex].classList.add('active');
31    }
32});