opacity_out 질문입니다

Question

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 ); })();

1분코딩 · Answer

해결하셨군요 다행입니다!

김윤진 · Answer

해결했습니다!