Mouse Effect Reference v1.0 </doc>

// 출력용
window.addEventListener("mousemove", function(event){
    document.querySelector(".clientX").innerHTML = event.clientX;
    document.querySelector(".clientY").innerHTML = event.clientY;
    document.querySelector(".offsetX").innerHTML = event.offsetX;
    document.querySelector(".offsetY").innerHTML = event.offsetY;
    document.querySelector(".pageX").innerHTML = event.pageX;
    document.querySelector(".pageY").innerHTML = event.pageY;
    document.querySelector(".screenX").innerHTML = event.screenX;
    document.querySelector(".screenY").innerHTML = event.screenY;
});

// 마우스 움직이기
window.addEventListener("mousemove", function(e){
    let cursor =  document.querySelector(".cursor");
    let x = e.clientX - 25 + "px";
    let y = e.clientY - 25 + "px";

    cursor.style.cssText = "left:" + x + "; top:" + y;


    document.querySelectorAll(".contents em").forEach(elem => {
        elem.addEventListener("mouseenter", () => {
            document.querySelector(".cursor").classList.add("active");
        });
        elem.addEventListener("mouseleave", () => {
            document.querySelector(".cursor").classList.remove("active");
        });
    });
});

// 출력용
document.addEventListener("mousemove", e => {
    document.querySelector(".pageX").textContent = e.pageX;
    document.querySelector(".pageY").textContent = e.pageY;
});

//
const cursor = document.querySelector(".cursor");
const follower = document.querySelector(".cursor-follower");
const cursortText = document.querySelectorAll(".contents em")
const cursorWidth = cursor.clientWidth / 2;
const followerWidth = follower.clientWidth / 2;


// 마우스 움직이기
document.addEventListener("mousemove", e => {
    gsap.to(cursor, {duration: .3, left: e.pageX - cursorWidth, top: e.pageY - cursorWidth});
    gsap.to(follower, {duration: .8, left: e.pageX - followerWidth, top: e.pageY - followerWidth});
});

// 마우스 오버효과
// cursortText.addEventListener("mouseenter", function(){
//     cursor.classList.add("active");
//     follower.classList.add("active");
// });
// cursortText.addEventListener("mouseleave", function(){
//     cursor.classList.remove("active");
//     follower.classList.remove("active");
// });

// 마우스 오버효과(다중 선택)
cursortText.forEach(elem => {
    elem.addEventListener("mouseenter", ()=>{
        cursor.classList.add("active");
        follower.classList.add("active");
    });
    elem.addEventListener("mouseleave", ()=>{
        cursor.classList.remove("active");
        follower.classList.remove("active");
    });
});

// 선택자
const cursor = document.querySelector(".cursor");
const contentEm = document.querySelectorAll(".contents em");
const infoLi = document.querySelectorAll(".info.bottom li");

// 움직임 효과
document.addEventListener("mousemove", function(e){
    gsap.to(cursor, {duration: 0.3, left: e.pageX, top: e.pageY});
});

// 오버 효과
contentEm.forEach(elem => {
    elem.addEventListener("mouseenter", () => {
        cursor.classList.add("active");
    });
    elem.addEventListener("mouseleave", () => {
        cursor.classList.remove("active");
    });
});

// 출력용
infoLi.forEach(info => {
    info.addEventListener("click", function(){
        const text = this.textContent || this.innerHTML;
        cursor.style.mixBlendMode = text;

        infoLi.forEach(li => {
            li.classList.remove("active");
            this.classList.add("active");
        });
    });
});

let x = 0,
    y = 0,
    mouseX = 0,
    mouseY = 0,
    angleX = 0,
    angleY = 0,
    fmouseX = 0,
    fmouseY = 0;
document.addEventListener("mousemove", function(e){
    x = e.pageX;
    y = e.pageY;
    //mouseX = window.innerWidth/2 - x;
    //mouseY = window.innerHeight/2 - y;
    mouseX = Math.max(-100, Math.min(100, window.innerWidth/2 - x));
    mouseY = Math.max(-100, Math.min(100, window.innerHeight/2 - y));
    angleX = (12 * mouseX) / 100;
    angleY = (12 * mouseY) / 100;
    fmouseX += (angleX - fmouseX) * 0.1;
    fmouseY += (angleY - fmouseY) * 0.1;
    //움직임
    const move = document.querySelector(".move-image");
    move.style.transform = "translate(-50%, -50%) perspective(600px) rotateX("+fmouseY+"deg) rotateY("+ -fmouseX+"deg)";
    //커서
    gsap.to(".cursor", {duration: 0.3, left: x, top: y});
});
//출력용
    document.addEventListener("mousemove", function(){
    document.querySelector(".pageX").textContent = x;
    document.querySelector(".pageY").textContent = y;
    document.querySelector(".mouseX").textContent = mouseX;
    document.querySelector(".mouseY").textContent = mouseY;
});

let x = 0;
let y = 0;

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

moveImg.addEventListener("mousemove", function(e){
    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));

    gsap.to(".cursor", {duration: .2, left: e.pageX, top: e.pageY});
});

const word = document.querySelector(".word");

// const shadow = e => {
//     const {x,y} = e;
//     const rect = word.getBoundingClientRect();
//     const mouseX = (x - rect.left - rect.width/2) / rect.width * 5;
//     const mouseY = (y - rect.top - rect.height/2) / rect.height * 5;

//     word.style.textShadow = `${mouseX}px ${-mouseY}px 0px rgba(255, 165, 0, 0.4),
//                             ${-mouseX}px ${mouseY}px 0px rgba(255, 35, 251, 0.4),
//                             ${mouseY}px ${-mouseX}px 0px rgba(255, 255, 73, 0.4),
//                             ${-mouseY}px ${mouseX}px 0px rgba(102, 249, 255, 0.4)`
// };
// window.addEventListener("mousemove", shadow);

// 다중일 때
window.addEventListener("mousemove", e => {
    document.querySelectorAll(".word").forEach(elem => {
        const {x,y} = e;
        const rect = elem.getBoundingClientRect();
        const mouseX = (x - rect.left - rect.width/2) / rect.width * 5;
        const mouseY = (y - rect.top - rect.height/2) / rect.height * 5;

        elem.style.textShadow = `${mouseX}px ${-mouseY}px 0px rgba(255, 165, 0, 0.4),
                                ${-mouseX}px ${mouseY}px 0px rgba(255, 35, 251, 0.4),
                                ${mouseY}px ${-mouseX}px 0px rgba(255, 255, 73, 0.4),
                                ${-mouseY}px ${mouseX}px 0px rgba(102, 249, 255, 0.4)`
    });
});

class MaskSVG {
    constructor(obj){
        this.el = document.body.querySelector('#svg-mask');
        this.rect = document.body.querySelectorAll('.svg-mask--rect');
        this.circle = document.body.querySelectorAll('.svg-mask--circle');
        this.clicked = false;
        this.init();
    }
    init(){
        this.handleResize();
        this.binds();
        this.events();
    }
    binds(){
        this.handleResize = this.handleResize.bind(this);
        this.handleMouse = this.handleMouse.bind(this);
        this.handleClick = this.handleClick.bind(this);
    }
    events(){
        window.addEventListener('resize', this.handleResize);
        window.addEventListener('mousemove', this.handleMouse);
        window.addEventListener('touchmove', this.handleMouse);
        window.addEventListener('click', this.handleClick);
    }
    handleMouse(e){
        gsap.to(this.circle, {
            duration: 0.7,
            cx: e.clientX || e.touches[0].clientX,
            cy: e.clientY || e.touches[0].clientY,
            ease: 'power2.out'
        });
    }
    handleResize(){
        this.minRadius = window.innerWidth * 0.1;
        this.maxRadius = window.innerWidth * 1.1;
        gsap.set([this.el, this.rect],{
            width: `${window.innerWidth}px`,
            height: `${window.innerHeight}px`
        });
        gsap.set(this.circle,{
            r: `${this.minRadius}px`
        });
    }
    handleClick(){
        this.clicked = !this.clicked;
        gsap.to(this.circle,{
            duration: 1,
            r: this.clicked ? this.maxRadius : this.minRadius,
            ease: 'power3.inOut'
        })
    }
}
new MaskSVG();