calcValues 함수에 values 값이 제대로 들어가지 않습니다.
당연히 해당 함수를 돌릴때, 계속 아래와 같은 에러가 등장합니다.
이부분이라고 생각해주시면 감사하겠습니다.
아래 복사한 제 코드문입니다. 무엇이 잘못일까요...?
(() => {
let yOffset = 0; // window.pageYOffset 대신 사용할 변수
let prevScrollHeight = 0; // 현재 스크롤 위치(yOffset)보다 이전에 위치한 스크롤 섹션들의 스크롤 높이값의 합
let currentScene = 0; // 현재 활성화된(눈 앞에 보고있는) 씬(scroll-section)
let enterNewScene = false;
const sceneInfo = [
{
// 0
type: "sticky",
heightNum: 5, // 모든 디스플레이 높이의 5배로 지정해준다.
scrollHeight: null,
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_in: [0, 1, { start: 0.1, end: 0.2 }],
messageB_Opacity_in: [0, 1, { start: 0.3, end: 0.4 }],
messageC_Opacity_in: [0, 1, { start: 0.5, end: 0.6 }],
messageD_Opacity_in: [0, 1, { start: 0.7, end: 0.8 }],
messageA_Opacity_out: [1, 0, { start: 0.25, end: 0.3 }],
messageB_Opacity_out: [1, 0, { start: 0.45, end: 0.5 }],
messageC_Opacity_out: [1, 0, { start: 0.65, end: 0.7 }],
messageD_Opacity_out: [1, 0, { start: 0.85, end: 0.9 }],
messageA_translateY_in: [20, 0, { start: 0.1, end: 0.2 }],
messageB_translateY_in: [20, 0, { start: 0.3, end: 0.4 }],
messageC_translateY_in: [20, 0, { start: 0.5, end: 0.6 }],
messageD_translateY_in: [20, 0, { start: 0.7, end: 0.8 }],
messageA_translateY_out: [0, -20, { start: 0.25, end: 0.3 }],
messageB_translateY_out: [0, -20, { start: 0.45, end: 0.5 }],
messageC_translateY_out: [0, -20, { start: 0.65, end: 0.7 }],
messageD_translateY_out: [0, -20, { start: 0.85, end: 0.9 }]
}
},
{
// 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")
}
}
];
/////////////////////////////////////////////////
const setLayout = () => {
// 각 높이 세팅
for (let i = 0; i < sceneInfo.length; i++) {
if (sceneInfo[i].type === "sticky") {
sceneInfo[i].scrollHeight =
sceneInfo[i].heightNum * innerHeight;
} else {
sceneInfo[i].scrollHeight =
sceneInfo[i].objs.container.style.offsetHeight;
}
sceneInfo[
i
].objs.container.style.height = `${sceneInfo[i].scrollHeight}px`;
}
totalScrollHeight = 0;
yOffset = window.pageYOffset;
for (let i = 0; i < sceneInfo.length; i++) {
totalScrollHeight += sceneInfo[i].scrollHeight;
if (totalScrollHeight >= yOffset) {
currentScene = i;
break;
}
}
document.body.setAttribute("id", `show-scene-${currentScene}`);
};
/////////////////////////////////////////////////
const calcValues = (values, currentYoffset) => {
let rv;
let scrollHeight = sceneInfo[currentScene].scrollHeight;
let scrollRatio = currentYoffset / scrollHeight;
console.log(currentYoffset);
if (values.length === 3) {
let partScrollStart = values[2].start * scrollHeight;
let partScrollEnd = values[2].end * scrollHeight;
const partScrollHeight = partScrollEnd - partScrollStart;
if (
currentYoffset >= partScrollStart &&
currentYoffset <= partScrollEnd
) {
rv =
((currentYoffset - partScrollStart) / partScrollHeight) *
(values[1] - values[0]) +
values[0];
} else if (currentYoffset < partScrollStart) {
rv = values[0];
} else if (currentYoffset > partScrollEnd) {
rv = values[1];
}
} else {
rv = scrollRatio * (values[1] - values[0]) + values[0];
}
return rv;
};
const playAnimation = () => {
const Values = sceneInfo[currentScene].values;
const objs = sceneInfo[currentScene].objs;
const currentYoffset = yOffset - prevScrollHeight;
const scrollHeight = sceneInfo[currentScene].scrollHeight;
const scrollRatio = currentYoffset / scrollHeight;
switch (currentScene) {
case 0:
console.log("0번입니다.", 0);
if (scrollRatio <= 0.24) {
objs.messageA.style.opacity = calcValues(
Values.messageA_Opacity_in,
currentYoffset
);
objs.messageA.style.transform = `translateY(
${calcValues(
Values.messageA_TranslateY_in,
currentYoffset
)}%
)`;
} else {
objs.messageA.style.opacity = calcValues(
Values.messageA_Opacity_out,
currentYoffset
);
objs.messageA.style.transform = `translateY(
${calcValues(
Values.messageA_TranslateY_out,
currentYoffset
)}%)`;
}
break;
case 1:
console.log("1번입니다.", 0);
break;
case 2:
console.log("2번입니다.", 0);
break;
case 3:
console.log("3번입니다.", 0);
break;
}
};
const scrollLoop = () => {
enterNewScene = false;
prevScrollHeight = 0;
for (let i = 0; i < currentScene; i++) {
prevScrollHeight += sceneInfo[i].scrollHeight;
}
if (yOffset > prevScrollHeight + sceneInfo[currentScene].scrollHeight) {
enterNewScene = true;
currentScene++;
document.body.setAttribute("id", `show-scene-${currentScene}`);
}
if (yOffset < prevScrollHeight) {
enterNewScene = true;
if (currentScene === 0) return;
currentScene--;
document.body.setAttribute("id", `show-scene-${currentScene}`);
}
if (enterNewScene) return;
playAnimation();
};
window.addEventListener("scroll", () => {
yOffset = window.pageYOffset;
console.log(yOffset);
scrollLoop();
});
window.addEventListener("load", setLayout);
window.addEventListener("resize", setLayout);
})();
