인프런 커뮤니티 질문&답변
작성한 질문수
질문 있습니다~!
작성
·
330
0
안녕하세요!
수업 너무 잘들었습니다~
코딩일레븐님께 배운 코드를 사용하려고 하는데 window.onload가 중복으로 사용하면 최하단에 있는것만 실행이 되더라고요 ㅠ 구글링 해도 제가 js 이해가 짧아서 안되네요;;; 해당 강의에서 배운 스크롤바에 앞선 강의에서 배운 커서와 버튼 효과도 같이 주려면 어떻게 해야하나요? 바쁘시겠지만 문의 드리겠습니다~항상 감사합니다!
답변 5
1
0
코딩일레븐
지식공유자
let btn;
let cursorItem;
let circle;
let x=0, y = 0;
let mx=0, my = 0;
let scrollTop = 0;
let bar;
window.onload = function(){
btn = document.querySelector(".btn");
cursorItem = document.querySelector(".cursorItem");
circle = cursorItem.querySelector(".circle");
btn.addEventListener("mouseover", function(e){
circle.style.transform = "scale(.3)";
})
btn.addEventListener("mouseout", function(e){
circle.style.transform = "scale(1)";
})
window.addEventListener("mousemove", function(e){
x = e.clientX;
y = e.clientY;
});
loop();
bar = document.getElementsByClassName("bar")[0];
window.addEventListener("scroll", function(e){
scrollTop = document.documentElement.scrollTop;
let per = Math.round((scrollTop / (document.documentElement.scrollHeight - window.innerHeight)) * 100);
bar.style.height = per + "%";
}, false)
}
function loop(){
mx += (x - mx ) * .09;
my += (y - my ) * .09;
cursorItem.style.transform = "translate("+ mx +"px, "+ my + "px )";
requestAnimationFrame(loop);
}0
kkangfly1
질문자
진짜 죄송한데요 제가 이렇게 하기처럼 코드를 짰는데요 혹시 봐주실 수 있을까요?
let btn;
let cursorItem;
let circle;
let x=0, y = 0;
let mx=0, my = 0;
let scrollTop = 0;
let bar;
window.onload = function(){
function first(){
btn = document.querySelector(".btn");
cursorItem = document.querySelector(".cursorItem");
circle = cursorItem.querySelector(".circle");
btn.addEventListener("mouseover", function(e){
circle.style.transform = "scale(.3)";
})
btn.addEventListener("mouseout", function(e){
circle.style.transform = "scale(1)";
})
window.addEventListener("mousemove", function(e){
x = e.clientX;
y = e.clientY;
});
loop();
}
function second() {
bar = document.getElementsByClassName("bar")[0];
window.addEventListener("scroll", function(e){
scrollTop = document.documentElement.scrollTop;
let per = Math.round((scrollTop / (document.documentElement.scrollHeight - window.innerHeight)) * 100);
bar.style.height = per + "%";
}, false)
}
}
function loop(){
mx += (x - mx ) * .09;
my += (y - my ) * .09;
cursorItem.style.transform = "translate("+ mx +"px, "+ my + "px )";
requestAnimationFrame(loop);
}
0
kkangfly1
질문자
빠른 답변 감사합니다~!
근데 진짜 죄송한데요 이해가 안되요 ㅠ
이게 loop문은 하기에 안들거야 하는건가요??
window.onload = function(){
버튼 이벤트
스크롤이벤트 등등등
전부 여기에 넣으면 됩니다.
}
0
코딩일레븐
지식공유자
아 맞습니다. onload 중복 사용이 안 됩니다. 이벤트를 거는 부분은 전부 onload 안에 넣으시면 됩니다. 페이지가 로드가 되어야 버튼 이벤트 같은 것을 줄 수 있거든요. 각 강의에서 onload 안에 들어 있는 스크립트들을 모아 놓고 사용해도 됩니다. onload 밖에 있는 함수들도 마찮가지고요.
let 변수 1;
let 변수2;
window.onload = function(){
버튼 이벤트
스크롤이벤트 등등등
전부 여기에 넣으면 됩니다.
}
function 함수1(){
}
function 함수2(){
}
function 함수3(){
}
혹시 이해가 안되시면 댓글 달아주세요.
넵 즐거운 하루보내세요