저도 loop함수만 실행하면 오류가떠요!

Question

안녕하세요! 저도 스크립트에서 loop(); 만 실행하면 스크롤 하게되면 강아지있는 사진이 붕 뜨는데 뭐가 문제일까요ㅠㅠ 혹시 코드 봐주실수 있나요!! let x = 0 ; let y = 0 ; let mx = 0 ; let my = 0 ; let speed = 0.03 ; let scrollTop = 0 ; let parallax_0 , parallax_1 , parallax_2 , parallax_3 , parallax_4 , parallax_5 , parallax_6 ; window . onload = function () { progressBar = document . getElementsByClassName ( "progressBar" )[ 0 ]; parallax_0 = document . getElementById ( "parallax_0" ); parallax_1 = document . getElementById ( "parallax_1" ); parallax_2 = document . getElementById ( "parallax_2" ); parallax_3 = document . getElementById ( "parallax_3" ); parallax_4 = document . getElementById ( "parallax_4" ); parallax_5 = document . getElementById ( "parallax_5" ); parallax_6 = document . getElementById ( "parallax_6" ); window . addEventListener ( 'resize' , stageResize , false ); window . addEventListener ( 'mousemove' , mouseMove , false ); window . addEventListener ( 'scroll' , scrollFunc , false ); stageResize (); loop (); } function scrollFunc ( e ) { scrollTop = document . documentElement . scrollTop ; let per = Math . ceil ( scrollTop / ( _documentHum - _windowHNum ) * 100 ); progressBar . style . width = per + '%' ; parallax_0 . style . transform = "translate3d(0px," + scrollTop * .03 + "px, 0px)" ; parallax_1 . style . transform = "translate3d(0px," + - scrollTop * .03 + "px, 0px)" ; parallax_2 . style . transform = "translate3d(0px," + - scrollTop * .12 + "px, 0px)" ; parallax_3 . style . transform = "translate3d(0px," + - scrollTop * .16 + "px, 0px)" ; parallax_4 . style . transform = "translate3d(0px," + - scrollTop * .22 + "px, 0px)" ; parallax_5 . style . transform = "translate3d(0px," + - scrollTop * .25 + "px, 0px)" ; } function stageResize (){ _documentHum = document . body . offsetHeight ; _windowHNum = window . outerHeight ; } function loop (){ mx += ( x - mx ) * speed ; my += ( y - my ) * speed ; parallax_4 . style . transform = "translate3d(" + mx / 140 + "px ," + - scrollTop * 22 + "px, 0px)" ; parallax_5 . style . transform = "scale(1.1) translate(" + mx / 50 + "px," + - scrollTop * 25 + "px)" ; parallax_6 . style . transform = "scale(1.2) translate(" + - mx / 20 + "px," + - my / 20 + "px)" ; window . requestAnimationFrame ( loop ); } function mouseMove ( e ){ x = ( e . clientX - window . innerWidth / 2 ); y = ( e . clientY - window . innerHeight / 2 ); }

코딩일레븐 · Answer

안녕하세요 scrollFunc(e) 안에 있는 아래 두 줄을 주석 처리 해보세요. //parallax_4 . style . transform = "translate3d(0px," + - scrollTop * .22 + "px, 0px)" ; //parallax_5 . style . transform = "translate3d(0px," + - scrollTop * .25 + "px, 0px)" ; loop() 함수 내부에도 있어서 transform 값 변경이 일어나고 있어서 문제가 발생하겠네요.