js 마우스 커서 이펙트

이미지 출처 @목화솜

index.html

 <div class="cursor"></div>
    <div id="wrapper">
        <div class="image cursor-scale">
             <img src="./images/bamby.jpg" />
        </div>
    </div>

style.css

#wrapper{
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.cursor{
    border:1px solid #9c0001;
    top:0;
    width: 10px;
    height: 10px;
    z-index:999;
    display: flex;
    place-items: center;
    color:#fff;
    text-transform: uppercase;
    border-radius: 50%;
    pointer-events:none;
}

script.js

gsap.set('cursor',{xPercent:-50, yPercent: -50});

let cursor = document.querySelector('.cursor');
let cursorScale = document.querySelectorAll('.cursor-scale');

let mouseX;
let mouseY;

window.addEventListener('mousemove',e=>{
    mouseX = e.clientX;
    mouseY = e.clientY;

    gsap.to(cursor, 0.5, {x:mouseX, y:mouseY});
})

cursorScale.forEach((item)=>{
    item.addEventListener('mouseleave', () => {
        cursor.textContent = '';
        gsap.to(cursor, 0.2, {width: '10px', height:'10px', background:'transparent',top:'-2.5px',left:'-2.5px'});
            });
    item.addEventListener('mousemove', () => {
        cursor.textContent = '->'
        gsap.to(cursor, 0.2, {width: '100px', height:'100px', background:'#9c0001',top:'-50px',left:'-50px', justifyContent:'center'});
    });
})

document.body.style.cursor = 'none';
let cursor = document.querySelector('.cursor');
let cursorScale = document.querySelectorAll('.cursor-scale');

let mouseX;
let mouseY;

window.addEventListener('mousemove',e=>{
    mouseX = e.clientX;
    mouseY = e.clientY;

    if(e.target.classList.contains('cursor-scale')){
        cursorScale.forEach((item)=>{
            item.addEventListener('mousemove', (e) => {
                gsap.to(cursor, 0.2, {x:`${item.offsetLeft}px`, y:`${item.offsetTop}px`, width:`${item.clientWidth}px`, height:`${item.clientHeight}px`});
                cursor.classList.add('color');
            });
        
            item.addEventListener('mouseleave', (e) => {
                gsap.to(cursor, 0.2, {x:mouseX, y:mouseY, width: '10px', height:'10px'});
                cursor.classList.remove('color');
            });
        })
    }else{
        gsap.to(cursor, 0.2, {x:mouseX, y:mouseY});
    }
})