인프런 커뮤니티 질문&답변

(() => {
    let yOffset = 0; // window.pageYOffest 대신 쓸 변수
    let prevScrollHeight = 0; // 현재 스크롤 위치(yOffset)보다 이전에 위치한 scroll-section의 스크롤 높이값의 합
    let currentScene = 0; // 현재 활성화 된(눈 앞에 보고 있는) 씬(scroll-section)


    // 각 scene의 정보를 담고 있는 배열
    const sceneInfo = [
        {
            //0
            type: 'sticky',
            heightNum: 5, // 브라우저 높이의 5배로 scrollHeight 세팅
            scrollHeight: 0,
            objs: {
                container: document.querySelector('#scroll-section-0'),
                messageA: document.querySelector('#scroll-section-0 .main-message.a'),
                messageB: document.querySelector('#scroll-section-0 .main-message.b'),
                messageC: document.querySelector('#scroll-section-0 .main-message.c'),
                messageD: document.querySelector('#scroll-section-0 .main-message.d')
            },
            values: {
                messageA_opacity: [0, 1]
            }
        },
        {
            //1
            type: 'normal',
            heightNum: 5,
            scrollHeight: 0,
            objs: {
                container: document.querySelector('#scroll-section-1')
            }
        },
        {
            //2
            type: 'sticky',
            heightNum: 5,
            scrollHeight: 0,
            objs: {
                container: document.querySelector('#scroll-section-2')
            }
        },
        {
            //3
            type: 'sticky',
            heightNum: 5,
            scrollHeight: 0,
            objs: {
                container: document.querySelector('#scroll-section-3')
            }
        },
    ]

    function setLayout() {
        // 각 스크롤 섹션의 높이 세팅
        for (let i = 0; i < sceneInfo.length; i++) {
            // i번째 sceneInfo의 scrollHeight를, i번째 sceneInfo에 있는 heightNum(변수)와 window.innerHeight의 곱한 값으로 해주세요.
            sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight;
            // scroll-section-i의 높이를, sceneInfo의 scrollHeight px값만큼 설정해주세요.
            // `` -> 템플릿 문자열 / `${기본적으로 문자열이지만 변수도 넣을 수 있음.}`
            sceneInfo[i].objs.container.style.height = `${sceneInfo[i].scrollHeight}px`;
        }

        // load, setLayout -> 현재 스크롤 위치에 맞춰서 currentScene을 배정
        yOffset = window.pageYOffset;
        let totalScrollHeight = 0;
        for (let i = 0; i < sceneInfo.length; i++) {
            totalScrollHeight += sceneInfo[i].scrollHeight;
            // totalScrollHeight가 현재 스크롤 위치보다 크거나 같아졌을 때, for문을 멈추고 currentScene을 i번째로 설정
            if (totalScrollHeight >= yOffset) {
                currentScene = i;
                break;
            }
        }
        //currentScene의 값에 맞춰 body의 id를 세팅함.
        document.body.setAttribute('id', `show-scene-${currentScene}`)
    }

    function calcValues(values, currentYOffset) { //currentYOffset -> 현재 씬에서 얼마나 스크롤 됐는지

    }


    function playAnimation() {
        const objs = sceneInfo[currentScene].objs;
        const values = sceneInfo[currentScene].values;
        const currentYOffset = yOffset - prevScrollHeight;
        console.log(currentScene, currentYOffset);

        switch (currentScene) {
            case 0:
                //console.log('0play')
                let messageA_opacity_0 = values.messageA_opacity[0];
                let messageA_opacity_1 = values.messageA_opacity[1];

                break;

            case 1:
                //console.log('1play')
                break;

            case 2:
                //console.log('2play')
                break;

            case 3:
                //console.log('3play')
                break;

        }
    }


    function scrollLoop() { // 현재 눈 앞에 몇번째 scroll-section이 스크롤 되는지 확인하는 함수
        let prevScrollHeight = 0;
        for (let i = 0; i < currentScene; i++) {
            // 이전 진행된 스크롤 값 = i번째 sceneInfo의 scrollHeight값.
            // prevScrollHeight = prevScrollHeight + sceneInfo[i].scrollHeight;
            // += -> 왼쪽의 피연산자에 오른쪽의 피연산자를 더한 후, 그 결괏값을 왼쪽의 피연산자에 대입함.
            prevScrollHeight += sceneInfo[i].scrollHeight;
        }
        // yOffest > 이전 스크롤 값 + 현재 활성화 된 scroll-section의 스크롤 값
        if (yOffset > prevScrollHeight + sceneInfo[currentScene].scrollHeight) {
            currentScene++;
            //currentScene의 값에 맞춰 body의 id를 세팅함.
            document.body.setAttribute('id', `show-scene-${currentScene}`)
        }

        if (yOffset < prevScrollHeight) {
            if (currentScene === 0) return; // 브라우저 바운스 효과로 인해 마이너스가 되는 것을 방지(모바일)
            currentScene--;
            //currentScene의 값에 맞춰 body의 id를 세팅함.
            document.body.setAttribute('id', `show-scene-${currentScene}`)
        }

        playAnimation();

    }

    // 창 사이즈가 바뀔 때마다 resize하면 setLayout이라는 함수가 작동하도록 
    // window.addEventListener('DOMContentLoaded', setLayout);
    window.addEventListener('load', setLayout);
    window.addEventListener('resize', setLayout);
    // 익명함수, 구체적인 역할을 하는 함수들을 여러개 호출할 예정.
    window.addEventListener('scroll', () => {
        yOffset = window.pageYOffset; // 스크롤 될 때마다 값을 보여줌.
        scrollLoop(); // 스크롤 될때 실행되는 함수
    })


    setLayout();
})();