마우스 이펙트01
마우스 이펙트 01에 관한 예제입니다.
{
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";
});
// 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));
})
})
}
01. 마우스 이동 이벤트를 감지하는 이벤트 리스너 등록:
- mousemove를 감지하는 이벤트 리스너를 등록합니다.
- 이벤트가 발생할 때마다, 마우스 커서의 위치와 관련된 여러 정보의 내용으로 업데이트합니다.
02. 선택자 설정:
- 'mouse__cursor' 클래스를 가진 HTML 요소를 선택합니다. 이 요소는 마우스 커서를 대체할 사용자 지정 마우스 커서 역할을 합니다.
03. 다시 마우스 이동 이벤트를 감지하는 이벤트 리스너 등록:
- 각각의 이벤트가 발생할 때마다, 'mousecursor'요소의 left와 top속성을 조정해 마우스 커서를 마우스 위치에 따라 이동시킵니다. 이를 통해 마우스 커서를 사용자 정의로 제어합니다.
04. 특정 스팬에 마우스를 올렸을 때 사용자 정의 커서에 관련된 스타일을 적용:
- 'mouse__text span' 선택자를 사용하여 HTML 문서에서 '.mouse__text' 클래스 내부의 모든 'span'요소를 선택합니다.
- forEach 메서드를 사용해 선택한 모든 span 요소에 대한 이벤트 리스너를 등록합니다.
- 각 스팬 요소에 대해 'mouseover' 이벤트가 발생하면, 'mouseCursor' 요소에 s1, s2, s3, ... 클래스를 추가합니다.
- mouseout 이벤트가 발생하면, 해당 스팬에서 클래스를 제거하여 커서의 스타일을 초기 상태로 복원합니다.
마우스 이펙트02
마우스 이펙트 02에 관한 예제입니다.
{
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");
});
});
}
01. 선택자 설정:
- 'mouse__cursor', 'mouse__cursor2' 클래스를 가진 HTML 요소를 선택합니다. 이 요소는 첫 번째 마우스 커서 역할을 합니다.
02. 마우스 이동 이벤트를 감지하는 이벤트 리스너 등록:
- 이벤트가 발생할 때마다, GSAP를 사용하여 첫 번째 마우스 커서와 두 번째 마우스 커서의 위치를 업데이트합니다.
03. 특정 텍스트 스팬에 마우스가 진입하거나 나갈 때:
- 'mouse__text span' 선택자를 사용하여 span 요소를 선택합니다.
- forEach 메서드를 이용하여 선택한 모든 span 요소에 대한 이벤트 리스너를 등록합니다.
- 각 스팬 요소에 대해 mouseenter 이벤트가 발생하면, 첫 번째와 두 번째 마우스 커서 요소에 active 클래스를 추가하여 사용자가 정의 커서의 활성화 효과를 나타냅니다.
- mouseleave 이벤트가 발생하면, active 클래스를 제거하여 커서의 활성화 효과를 제거합니다.
마우스 이펙트03
마우스 이펙트 03에 관한 예제입니다.
{
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
});
});
console.log(rect);
}
01. 선택자 등록:
- mouse__cursor 클래스를 가진 HTML 요소를 선택합니다. 이 요소는 마우스 커서 역할을 합니다.
02. 마우스 커서의 너비와 높이 계산:
- 'getBoundingClientRect()'함수를 사용해 mouse__cursor 요소의 현재 위치와 크기에 관한 정보를 'rect' 변수에 저장합니다.
03. 마우스 커서가 마우스 포인터 중앙에 위치:
- 마우스 이동 이벤트를 감지하는 이벤트 리스너를 등록합니다.
- 이벤트가 발생할 때마다, gsap.to를 사용하여 mouse__cursor 요소를 애니메이션화하여 마우스 커서를 마우스 위치에 따라 부드럽게 이동시킵니다.
- left와 top 속성을 사용해 e.pageX와 e.pageY를 계산하고, 이를 rect에서 얻은 마우스 커서의 너비와 높이의 절반값으로 조종합니다.
04. 디버깅:
- rect 객체를 콘솔에 기록합니다.