작성
·
180
0
(() => {
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();
})();
답변 1
0
prevScrollHeight를 윗부분에서 이미 선언해 주었는데,
scrollLoop 함수 시작 부분에서 let prevScrollHeight = 0; 으로 지역변수로 다시 초기화를 해주셔서
prevScrollHeight값이 계속 0으로 잡히고 있는 것으로 보이네요~