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

paintosm님의 프로필 이미지
paintosm

작성한 질문수

애플 웹사이트 인터랙션 클론!

특정 타이밍 스크롤 애니메이션 기능 추가

주제에 좀 벗어난 질문 같지만 답답해서 문의 좀 드립니다~^^;

작성

·

198

0

자바스크립트를 잘 몰라 문의 드려봅니다!

playAnimation() 함수안의

calcValues(values.messageA_opacity,currentYOffset);

라인의 currentYOffset는 이렇게 값을 넣어 calcValues()에 넘기는데요.

 calcValues() 함수안의

 let scrollRatio = currentYOffset / sceneInfo[currentScene].scrollHeight;

 currentScene은 보내지도 않았는데 어디서 어떻게 값을 받아서 사용할수있는건가요?

    function calcValues(values,currentYOffset){
            let rv;
            //현재 씬 (스크롤섹션)에서 스크롤된 범위를 구하기
            //현 재씬에서 스크롤된 값 / 
            let scrollRatio = currentYOffset / sceneInfo[currentScene].scrollHeight;
/////////////////////////////////////////////////////////////////////////////////////////////////
            console.log('currentYOffset: '+currentYOffset);//현재 씬에서 스크롤된 높이
////////////////////////////////////////////////////////////////////////////////////////////////
        }
        
    function playAnimation(){
            const objs = sceneInfo[currentScene].objs;
            const values = sceneInfo[currentScene].values;
            const currentYOffset = yOffset-prevScrollHeight;//현재 씬에서 스크롤된 높이=전체 씬에서 스크롤된 높이-이전 섹션의 높이의 합
            //console.log('currentYOffset: '+currentYOffset);//현재 씬에서 스크롤된 높이
            //console.log('yOffset: '+yOffset);//전체 씬에서 스크롤된 높이
            //console.log('prevScrollHeight: '+prevScrollHeight);//이전 섹션의 높이
            switch (currentScene){
                case 0:
                    //console.log('0 play');
                    let mesageA_opacity_0 = values.messageA_opacity[0];
                    let mesageA_opacity_1 = values.messageA_opacity[1];
                    //console.log("currentYOffset: "+currentYOffset);
/////////////////////////////////////////////////////////////////////////////////////////
                    calcValues(values.messageA_opacity,currentYOffset);
/////////////////////////////////////////////////////////////////////////////////////////                    
                    break;
                    
                case 1:
                    calcValues(values.messageA_opacity,currentYOffset);
                    //console.log(currentScene, currentYOffset);
                    break;
                    
                case 2:
                    console.log(currentScene, currentYOffset);
                    break;
                    
                case 3:
                    console.log(currentScene, currentYOffset);
                    break;
                    
            }
            
        }

답변 2

1

main.js 의 가장 상단(전역) 에  다음과 같이 선언되었습니다.

5번째 줄이요

ctrl + f 로 currentScene 검색해서 찾으셔두 되구요

let currentScene = 0// 현재 활성화된(눈 앞에 보고있는) 씬(scroll-section)

0

1분코딩님의 프로필 이미지
1분코딩
지식공유자

불멸의너구리좌님이 잘 설명해 주셨네요~~ 감사합니다^^
함수 밖에서 선언된 변수는 함수 내부에서 사용이 가능하기때문에, 이런 식의 코딩이 가능합니다.

paintosm님의 프로필 이미지
paintosm

작성한 질문수

질문하기