-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
opacity_out 질문입니다
21.04.22 20:40 작성 조회수 162
0
messageA_opacity_out이 실행이 안 되고
scrollRatio가 2.5일때 messageA가 사라집니다
(function () {
let yOffset = 0; //window.pageYOffset 대신 쓸 변수
let prevScrollHeight = 0; //현재 스크롤 위치(yOffset)보다 이전에 위치한 스크롤 섹션들의 스크롤 높이값의 합
let currentScene = 0; //눈앞에 보고 있는 씬
let enterNewScene = false; //새로운 scene이 시작된 순간 true
const sceneInfo = [
{
//0
type: 'sticky',
heightNum: 5,
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}],
messageA_opacity_out:[1,0,{start : 0.25, end: 0.3}]
}
}, {
//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')
}
}
];
//각 스크롤 섹션의 높이 세팅1
function setLayout() {
for (let i = 0; i < sceneInfo.length; i++) {
sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight;
sceneInfo[i].objs.container.style.height = `${sceneInfo[i].scrollHeight}px`;
}
// 현재씬을 자동으로 세팅하는 것
yOffset= window.pageYOffset;
let totalScrollHeight = 0;
for(let i = 0; i < sceneInfo.length; i++){
totalScrollHeight += sceneInfo[i].scrollHeight;
//totalscrollheight가 yoffset 보다 커지면 현재 i를 currentscene으로 세팅하고 for문을 빠져나온다
if(totalScrollHeight >= yOffset){
currentScene = i;
break;
}
}
// 바디에다가 현재씬 갱신한 것 세팅,새로고침할 때 id를 잘 넣어준다
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 사이에 애니메이션 실행, values[2]는 start:0.1,end:0.2
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;
}
function playAnimation(){
//container에서 가져온것
const objs = sceneInfo[currentScene].objs;
const values = sceneInfo[currentScene].values;
//현재 씬의 yoffset,씬이 넘어가면 그 씬이 yOffset을 새로 세팅해준다
const currentYOffset = yOffset - prevScrollHeight;
const scrollHeight = sceneInfo[currentScene].scrollHeight;
// 현재씬에서 얼마나 스크롤 했는지 비율이 나온다
const scrollRatio = currentYOffset / scrollHeight;
console.log(scrollRatio);
switch(currentScene){
case 0:
const messageA_opacity_in = calcValues(values.messageA_opacity_in,currentYOffset);
const messageA_opacity_out = calcValues(values.messageA_opacity_out,currentYOffset);
if(scrollRatio <= 0.22){
objs.messageA.style.opacity = messageA_opacity_in;
}
else{
objs.messageA.style.opacity = messageA_opacity_out;
}
break;
case 1:
break;
case 2:
break;
case 3:
break;
}
}
//햔제 스크린이 몇번 씬에 있는지 알려줌2
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; // scene이 바뀌는 순간 -값을 방지
currentScene++;
document.body.setAttribute('id',`show-scene-${currentScene}`)
}
if(yOffset < prevScrollHeight){
enterNewScene = true; // scene이 바뀌는 순간 -값을 방지
if(currentScene ===0) return; //위로 바운스효과 때문에(모바일)
currentScene--;
// 현재 씬에 맞춰서 바디에 아이디가 세팅된다,바뀌는 순간(resize)에만 체크
document.body.setAttribute('id',`show-scene-${currentScene}`)
}
//scene이 바뀌는 순간에 함수를 종료해서 playanimation이 한 턴 걸러진다
if(enterNewScene) return;
playAnimation();
}
// scroll해서 section을 넘어가면 currentScene[i]값이 실시간으로 바뀐다
window.addEventListener('scroll',function(){
yOffset = window.pageYOffset;
scrollLoop();
});
window.addEventListener('load',setLayout);
window.addEventListener('resize',setLayout);
})();
답변을 작성해보세요.
0
0
답변 2