작성
·
152
0
(() => {
let yOffset = 0; // window.pageYOffset 대신 쓸 변수
let prevScrollHeight = 0; //
let currentScene = 0; //
let enterNewScene = false; // 새로운 Scene 이 시작도는 순간.
const sceneInfo = [
{
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_in: [0, 1, { start: 0.1, end: 0.2 }],
// messageB_opacity_in: [0, 1, { start: 0.3, end: 0.4 }],
messageA_opacity_out: [0, 1, { start: 0.25, end: 0.3 }],
}
},
{
type: 'normal',
heightNum: 5, // 브라우저 높이의 5배로 scrollHeight 세팅;
scrollHeight: 0,
objs: {
container: document.querySelector("#scroll-section-1")
}
},
{
type: 'sticky',
heightNum: 5, // 브라우저 높이의 5배로 scrollHeight 세팅;
scrollHeight: 0,
objs: {
container: document.querySelector("#scroll-section-2")
}
},
{
type: 'sticky',
heightNum: 5, // 브라우저 높이의 5배로 scrollHeight 세팅;
scrollHeight: 0,
objs: {
container: document.querySelector("#scroll-section-3")
}
}
]
function setLayout() {
for (let i = 0; i < sceneInfo.length; i++) {
sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight; // A : 각 section height 값
sceneInfo[i].objs.container.style.height = `${sceneInfo[i].scrollHeight}px`; // A값을 각 section에 적용.
}
document.body.setAttribute('id',`show-scene-${currentScene}`);
}
function calcValues(values, currentYOffset) {
let rv;
const scrollHeight = sceneInfo[currentScene].scrollHeight;
const scrollRatio = currentYOffset / scrollHeight; // 현재 씬(스크롤섹션)에서 스크롤된 범위를 비율로 구하기
if (values.length === 3) {
// start ~ end 사이에 애니메이션 발생
const partScrollStart = values[2].start * scrollHeight;
const 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; // 안써주면 undefined
}
function playAnimation() {
const objs = sceneInfo[currentScene].objs;
const values = sceneInfo[currentScene].values;
const currentYOffset = yOffset - prevScrollHeight;
const scrollHeight = sceneInfo[currentScene].scrollHeight;
const scrollRatio = currentYOffset / scrollHeight;
switch (currentScene) {
case 0 :
// console.log('0 play');
const messageA_opacity_in = calcValues(values.messageA_opacity_in, currentYOffset);
const messageA_opacity_out = calcValues(values.messageA_opacity_out, currentYOffset);
if (scrollRatio <= 0.22) {
// in
objs.messageA.style.opacity = messageA_opacity_in;
} else {
// out
objs.messageA.style.opacity = messageA_opacity_out;
}
break;
case 1 :
// console.log('1 play');
break;
case 2 :
// console.log('2 play');
break;
case 3 :
// console.log('3 play');
break;
}
}
function 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}`);
}
// console.log(currentScene);
if (enterNewScene) return;
playAnimation();
}
window.addEventListener('resize',setLayout);
window.addEventListener('scroll',() => {
yOffset = window.pageYOffset;
scrollLoop();
});
setLayout();
})();
답변 1
0
messageA_opacity_out: [0, 1, { start: 0.25, end: 0.3 }],
이 부분을
messageA_opacity_out: [1, 0, { start: 0.25, end: 0.3 }],
이렇게 바꾸어주세요~
배열의 첫번째 원소가 초기값, 두번째 원소가 최종값이니
out 할 때는 opacity가 1에서 0으로 되어야하므로 저렇게 세팅이 되어야 합니다^^