Mouse Effect05

 $(".move-image").mousemove(function(e){
    gsap.to(".cursor",{duration:0.2, left:e.pageX -10  ,top:  e.pageY -10})

    //좌표값 중앙을 0으로 초기화
    //x = 컨튼츠 박스의 width()/2 + 왼쪽 여백값
    //y = 컨튼츠 박스의 height()/2 + 위쪽 여백값

    
    // let x = $(".move-image").width()/2
    // let y = $(".move-image").position().left;
    let x = e.clientX - ($(".move-image").width()/2+ $(".move-image").position().left)
    let y = e.clientY - ($(".move-image").height()/2+ $(".move-image").position().top)

    $(".img").attr({"style":"transform: translate("+ x/20 +"px,"+ y/20 +"px)"})



     $(".pageXX").text(Math.floor(x)+"px")
     $(".pageYY").text( Math.floor(y)+"px")
});

// const moveImg = document.querySelector(".move-image")

// moveImg.addEventListener("mousemove",function(e){
//     gsap.to(".cursor",{duration:0.2, left:e.pageX -10  ,top:  e.pageY -10})

//     const rect = this.getBoundingClientRect();
//     console.log(rect);
//     this.style.setProperty("--x",e.clientX-((rect.width/2)+rect.left))
//     this.style.setProperty("--y",e.clientY-((rect.height/2)+rect.top))

  
// })
// moveImg.addEventListener("mouseleave",function(){
//     this.style.setProperty("--x",0)
//     this.style.setProperty("--y",0)
// })









$(".sdsdsd").click(function(){
    $(".cursor strong").slideToggle()
})

$(window).mousemove(function(e){
    $(".pageX").text(e.pageX)
    $(".pageY").text(e.pageY)
    // $(".mouseX").text(e.mouseX)
    // $(".mouseY").text(e.mouseY)
    // $(".angleX").text(e.angleX)
    // $(".angleY").text(e.angleY)
    // $(".fmouseX").text(e.fmouseX)
    // $(".fmouseY").text(e.fmouseY)
});