마우스 이펙트01

The greatestglory inliving liesnot in never falling, but in rising every time we fall.

인생에서 가장 큰 영광은 넘어지지 않는것에 있는 것이 아니라 매번 일어선다는 데 있다.

clientX 0px
clientY 0px
offsetX 0px
offserY 0px
pageX 0px
pageY 0px
screenX 0px
screenY 0px

소스보기

JAVASCRIPT

Jquery

GASP

javascript


javascript

window.addEventListener("mousemove", () => {
    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;
})

// 선택자
const mouseCursor = document.querySelector(".mouse__cursor");

// 마우스 좌표 값 커서에게 할당
window.addEventListener("mousemove", (e) => {
    mouseCursor.style.left = e.clientX -25 + "px";
    mouseCursor.style.top = e.clientY -25 + "px";
});

// forEach문

document.querySelectorAll(" .mouse__text span").forEach((span, num) => {
    span.addEventListener("mouseover", ()=> {
        mouseCursor.classList.add("s" + (num+1));
    });
    span.addEventListener("mouseout", ()=> {
        mouseCursor.classList.remove("s" + (num+1));
    });
})

jquery


    // 선택자
    const sliderWrap = document.querySelector(".slider__wrap");
    const sliderImg = sliderWrap.querySelector(".slider__img");         // 보여지는 영역
    const sliderInner = sliderWrap.querySelector(".slider__inner");     // 움직이는영역
    const slider = sliderWrap.querySelectorAll(".slider");              // 개별이미지

    // 변수설정

    let currentIndex = 0;               // 현재 보이는 이미지
    let sliderCount = slider.length;    // 이미지 갯수
    let sliderInterval = 3000;          // 이미지 변경 간격시간
    // jquery
    setInterval(() => {
        currentIndex = (currentIndex + 1) % sliderCount;

        $(".slider__inner").css("position", "relative");
        $(".slider__inner").animate({left: -800 * currentIndex}, 600);

    }, sliderInterval);