01. 마우스 이펙트 - 마우스 따라다니기
마우스가 따라다니는 효과입니다.
- javascript
{
window.addEventListener("mousemove", (event) => {
document.querySelector(".clientX").innerHTML = event.clientX;
document.querySelector(".clientY").innerHTML = event.clientY;
document.querySelector(".offsetX").innerHTML = event.offsetX;
document.querySelector(".offsetY").innerHTML = event.offsetY;
document.querySelector(".pageX").innerHTML = event.pageX;
document.querySelector(".pageY").innerHTML = event.pageY;
document.querySelector(".screenX").innerHTML = event.screenX;
document.querySelector(".screenY").innerHTML = event.screenY;
})
// 선택자
const mouseCursor = document.querySelector(".mouse__cursor");
// 마우스 좌표 값을 커서 할당
window.addEventListener("mousemove", (e) => {
mouseCursor.style.left = e.clientX - 25 + "px";
mouseCursor.style.top = e.clientY - 25 + "px";
})
// for문
// for(let i=1; i<=8; i++){
// document.querySelector(".s"+i).addEventListener("mouseover", () => {
// mouseCursor.classList.add("s"+i);
// })
// document.querySelector(".s"+i).addEventListener("mouseout", () => {
// mouseCursor.classList.remove("s"+i);
// })
// }
// forEach문
document.querySelectorAll(".mouse__text span").forEach((span, num) => {
span.addEventListener("mouseover", () => {
mouseCursor.classList.add("s" + (num + 1));
});
span.addEventListener("mouseout", () => {
mouseCursor.classList.remove("s" + (num + 1));
});
});
}
확인하기
>02.마우스 이펙트 - 마우스 따라다니기(GSAP)
GSAP를 이용한 마우스 따라다니는 효과입니다..
- javascript
{
// 선택자
const mouseCursor = document.querySelector(".mouse__cursor");
const mouseCursor2 = document.querySelector(".mouse__cursor2");
window.addEventListener("mousemove", (e) => {
mouseCursor.style.left = e.pageX + "px";
mouseCursor.style.top = e.pageY + "px";
mouseCursor2.style.left = e.pageX + "px";
mouseCursor2.style.top = e.pageY + "px";
});
document.querySelectorAll(".mouse__text span").forEach(span => {
span.addEventListener("mouseenter", () => {
mouseCursor.classList.add("active");
mouseCursor2.classList.add("active");
})
span.addEventListener("mouseleave", () => {
mouseCursor.classList.remove("active");
mouseCursor2.classList.remove("active");
})
})
}
{
// 선택자
const mouseCursor = document.querySelector(".mouse__cursor");
const mouseCursor2 = document.querySelector(".mouse__cursor2");
window.addEventListener("mousemove", (e) => {
gsap.to(mouseCursor, {duration: 0.3, left: e.pageX-5, top: e.pageY-5});
gsap.to(mouseCursor2, {duration: 0.8, left: e.pageX-20, top: e.pageY-20});
});
document.querySelectorAll(".mouse__text span").forEach(span => {
span.addEventListener("mouseenter", () => {
mouseCursor.classList.add("active");
mouseCursor2.classList.add("active");
})
span.addEventListener("mouseleave", () => {
mouseCursor.classList.remove("active");
mouseCursor2.classList.remove("active");
})
})
}
확인하기
03. 마우스 이펙트 - 돋보기 효과
마우스 돋보기 효과입니다.
- JAVASCRIPT_CLIENTWIDTH
{
const mouseCursor = document.querySelector(".mouse__cursor");
const rect = mouseCursor.getBoundingClientRect();
window.addEventListener("mousemove", e => {
gsap.to(".mouse__cursor", {
duration: 0.5,
left: e.pageX - mouseCursor.clientWidth/2,
top: e.pageY - mouseCursor.clientHeight/2
})
})
}
{
const mouseCursor = document.querySelector(".mouse__cursor");
const rect = mouseCursor.getBoundingClientRect();
window.addEventListener("mousemove", e => {
gsap.to(".mouse__cursor", {
duration: 0.5,
left: e.pageX - rect.width/2,
top: e.pageY - rect.height/2
})
})
}
확인하기