-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
해결됨
저도 loop함수만 실행하면 오류가떠요!
21.12.22 20:34 작성 조회수 133
0
안녕하세요! 저도 스크립트에서 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);
}
답변을 작성해보세요.
0
코딩일레븐
지식공유자2021.12.22
안녕하세요
scrollFunc(e) 안에 있는 아래 두 줄을 주석 처리 해보세요.
//parallax_4.style.transform = "translate3d(0px," + -scrollTop * .22 + "px, 0px)";
//parallax_5.style.transform = "translate3d(0px," + -scrollTop * .25 + "px, 0px)";
loop() 함수 내부에도 있어서 transform 값 변경이 일어나고 있어서 문제가 발생하겠네요.
jjy
2021.12.23
주석처리했는데도 똑같이 그러고있어요!...ㅠㅠㅠ loop()안에
parallax_4.style.transform = "translate3d(" + mx / 140 + "px ," + -scrollTop * 22 + "px, 0px)";
에서 -scrollTop 부분이 잘못된건가요?! 오히려 저부분을 주석하니까 마우스페럴렉스는 안되는데 스크롤은 잘되요..
코딩일레븐
지식공유자2021.12.28
loop() 함수안의 5,6번 빼고 전부 주석처리해보세요. 0~4번까지
스크롤 및 마우스 이벤트 잘 되고 있습니다. 참고로 5번이 멍멍이 이미지 입니다.
답변 1