마우스 이펙트 03

마우스 이펙트_03 : 마우스 포인터 부분에만 하이라이트 효과 줘보기!

이미지 두장을 이용해 마우스 포인터에도 이미지를 백그라운드와 동일하게 주고
백그라운드 이미지에 하이라이트 효과를 주는 듯한 방식을 구현해보도록 할게요!

HTML 코드 : 이미지 두개 사용

이번 예제는 PUG를 사용하여 HTML 보다 효율적으로 작업 해보겠습니다
각 원을 만들어주기 위해 for문을 통해 반복시켜 생성해줍니다.

<main id="main">
    <section id="mouseType">
        <div class="mouse__cursor"></div>
        <div class="mouse__cursor2"></div>
        <div class="mouse__wrap">
            <p><span>Trust</span> My Self, Then you will be the <span>winner</span></p>
            <p><span>너 자신</span>을 믿어라 그리하면 <span>승리자</span>가 될 수 있다</p>
        </div>
    </section>
</main>

---

CSS 코드 : 마우스 커서에 이미지 넣기

GSAP를 통해 부드럽게 이동시켜주기 위해 js 코드는 gsap를 사용하여 작성해주도록 합시다! 1. 백그라운드에 색상을 주는 대신 background-image를 통해 뒷배경과 동일한 이미지를 넣어줍니다!.
2. 백그라운드 이미지는 마우스 커서 크기에 딱 맞도록'background-size' 를 설정해줍니다.
3. 배경은 가운데로 모아주기 위해 'background-position'을 'center cneter'를 설정해 정 가운데에 위치시켜줍니다. 4. 'background-attachment'를 'fixed'로 설정해 배경화면을 고정해주도록 합시다!

.mouse__cursor{
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 200px;
    z-index: -1;
    border-radius: 50%;
    background-image: url(../../../assets/slider/effect_bg_08.jpg);
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    border: 5px solid #fff;
}

---

JS 코드 : GSAP를 통해 부드럽게 이동시켜주기

GSAP를 통해 부드럽게 이동시켜주기 위해 js 코드는 gsap를 사용하여 작성해주도록 합시다!

const cursor = document.querySelector(".mouse__cursor")

    const circle = cursor.getBoundingClientRect();
    
    window.addEventListener("mousemove", (e)=>{
        gsap.to(cursor, {
            duration: 0.5, 
            left: e.pageX - circle.width/2, 
            top: e.pageY - circle.height/2,
        });
    })

---

결과

---

원본 소스 보기

원본 페이지 보기