마우스 커서 변경하기

특정 영역에서 마우스 커서가 변경되는 것을 구현해보았다.

script

var cursor = $(".cursor"),
follower = $(".cursor-follower"),
cursor_img = $(".cursor_img");

$("body").on("mousemove", function(e) {
    mouseX = e.clientX;
    mouseY = e.clientY;
})
 
$("#seoul").mouseenter(function(){
    $('.cursor').addClass('seoul');
}).mouseleave(function(){
    $('.cursor').removeClass('seoul');
})

$("#andar").mouseenter(function(){
    $('.cursor').addClass('andar');
}).mouseleave(function(){
    $('.cursor').removeClass('andar');
})

$("#naver").mouseenter(function(){
    $('.cursor').addClass('naver');
}).mouseleave(function(){
    $('.cursor').removeClass('naver');
})

$("#wooah").mouseenter(function(){
    $('.cursor').addClass('wooah');
}).mouseleave(function(){
    $('.cursor').removeClass('wooah');
})

$(".circle").mouseenter(function(){
    $('.cursor').addClass('circle');
}).mouseleave(function(){
    $('.cursor').removeClass('circle');
})

var posX = 0,
    posY = 0;
var mouseX = 0,
    mouseY = 0;

TweenMax.to({}, 0.1, { 
    repeat: -1,
    onRepeat: function() {
        posX += (mouseX - posX) / 9;
        posY += (mouseY - posY) / 9;

        TweenMax.set(follower, {
            css: {
            left: posX - 12,
            top: posY - 12
            }
        });

        TweenMax.set(cursor, {
            css: {
            left: mouseX-30,
            top: mouseY-30
            }
        });

        TweenMax.set(cursor_img, {
            css: {
            left: mouseX - 24,
            top: mouseY - 24
            }
        });
    }
});

소스를 보면 특정 영역에 들어가게 되면 클래스를 추가해준다.

html

   <div class="cursor">
        <img class="seoul" src="./assets/images/seoul.jpg" alt>
        <img class="naver" src="./assets/images/naver.PNG" alt>
        <img class="andar" src="./assets/images/andar.jpg" alt>
        <img class="wooah" src="./assets/images/wooah.jpg" alt>
        <p class="circle">view<br>site</p>
    </div>

.cursor {
    position:fixed;
    top:0;
    left: 0;
    z-index: 10;
    width: 180px;
    height: 150px;
    transform:translate(-50%, -50%);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cursor{
    z-index: 5;
    pointer-events: none;
}
.cursor .circle{
    display: none;
    text-align: center;
    font-family: 'ivypresto-display';
    font-weight: 600;
    font-size: 18px;
    line-height: 1.0;
    color: #2C2C2C;
}
.cursor.circle{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #FFFAF3;
}
.cursor.circle .circle{
    display: block;
}
.cursor img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}
.cursor.seoul .seoul{
    display: block;
}
.cursor.andar .andar{
    display: block;
}
.cursor.naver .naver{
    display: block;
}
.cursor.wooah .wooah{
    display: block;
}

커서에 쓰일 모든 이미지를 숨겨놓고 cursor에 맞는 클래스가 들어오면 보이게 처리해준다.