ss Mouse Effect 02
본문 바로가기
JAVASCRIPT Effect

Mouse Effect 02

by 꿈나무개발 2022. 9. 18.
728x90

마우스 효과02

자바스크립트를 이용하여 마우스 효과를 만들어 보겠습니다. 동그라미 두 개가 마우스를 따라다닙니다. 메뉴에 갔을 때, 소스보기에 갔을 때 마우스효과가 다르게 나타납니다.

원본 소스 보기

자바스크립트

마우스 효과를 만들기 위한 자바스크립트 작성법입니다. 

const cursor = document.querySelector(".mouse__cursor");
    const cursor2 = document.querySelector(".mouse__cursor2");
    const span = document.querySelectorAll(".mouse__wrap span");
    const menu = document.querySelectorAll("#header");  //메뉴
    const sauce = document.querySelectorAll(".modal__btn"); //소스보기
    
    window.addEventListener("mousemove", e => {     //마우스를 움직였을 때
        //커서 좌표값 할당
        // cursor.style.left = e.pageX - 5 + "px";
        // cursor.style.top = e.pageY - 5 + "px";
        // cursor2.style.left = e.pageX - 15 + "px";
        // cursor2.style.top = e.pageY - 15 + "px";
    
        //GSAP(script로는 할 수 없는 애니메이션 효과를 줄 수 있음)
        gsap.to(cursor, { duration: 0.3, left: e.pageX - 5, top: e.pageY - 5 });    
        gsap.to(cursor2, { duration: 0.8, left: e.pageX - 15, top: e.pageY - 15 });
    
        //오버 효과
        //mouseenter / mouseover => 이벤트 버블링
        span.forEach(span => {
            span.addEventListener("mouseenter", () => {     //화살표 함수에서는 this를 사용하지 못하지만 그냥 함수에서는 this를 사용
                cursor.classList.add("active");
                cursor2.classList.add("active");
            });
    
            span.addEventListener("mouseleave", () => {
                cursor.classList.remove("active");
                cursor2.classList.remove("active");
            });
        });
        menu.forEach(menu => {
            menu.addEventListener("mouseenter", () => {     //menu에 mouse를 올렸을 때
                cursor.classList.add("active2");
                cursor2.classList.add("active2");
            });
            menu.addEventListener("mouseleave", () => {     //menu에서 mouse를 뗐을 때
                cursor.classList.remove("active2");
                cursor2.classList.remove("active2");
            });
        });
        sauce.forEach(sauce => {
            sauce.addEventListener("mouseenter", () => {    //소스보기에 mouse를 올렸을 때
                cursor.classList.add("active3");
                cursor2.classList.add("active3");
            });
            sauce.addEventListener("mouseleave", () => {    //소스보기에 mouse를 뗐을 때
                cursor.classList.remove("active3");
                cursor2.classList.remove("active3");
            });
        });
    });
728x90
반응형

'JAVASCRIPT Effect' 카테고리의 다른 글

PARALLAX Effect 04  (1) 2022.09.18
SLIDER Effect 04  (2) 2022.09.18
PARALLAX Effect 03  (2) 2022.09.13
PARALLAX Effect 02  (2) 2022.09.13
Mouse Effect 01  (6) 2022.09.06

관련글

댓글

HTML

HTML

자세히보기
CSS

CSS

자세히보기
JAVASCRIPT

JAVASCRIPT

자세히보기
광고 준비중입니다.

티스토리툴바