Script samlpe/Mouse Effect
02. 마우스 이펙트 : 따라다니기 / gsap
Gayeong's
2022. 3. 11. 16:58
// highlight();
// modal();
// tabMenu();
const cursor = document.querySelector(".cursor")
const follower = document.querySelector(".cursor-follower")
window.addEventListener("mousemove", e => {
//커서에 좌표값 할당(저장)
// cursor.style.left =e.pageX -5 + "px";
// cursor.style.top =e.pageY -5 + "px";
// follower.style.left =e.pageX -15 + "px";
// follower.style.top =e.pageY -15 + "px";
//gsap
gsap.to(cursor, {duration: .3, left: e.pageX -5, top: e.pageY -5});
gsap.to(follower, {duration: .8, left: e.pageX -15, top: e.pageY -15});
//오버 효과
//span 오버 했을 때 클래스 active 추가 / 나갔을 떄 active 삭제
//mouseover,mouseenter / mouseout,mouseleave /이벤트 버블링
document.querySelectorAll(".mouse__wrap p span").forEach(span =>{
span.addEventListener("mouseenter",() => {
cursor.classList.add("active")
follower.classList.add("active")
})
span.addEventListener("mouseleave",() => { //mouseout과 효과가 비슷함
cursor.classList.remove("active")
follower.classList.remove("active")
})
})
//출력
document.querySelector(".pageX").innerText = e.pageX;
document.querySelector(".pageY").innerText = e.pageY;
})
document.querySelectorAll(".info").forEach ( span =>{
span.addEventListener("mouseenter",() => {
cursor.classList.add("active")
follower.classList.add("cursor-info")
})
span.addEventListener("mouseleave",() => {
cursor.classList.remove("active")
follower.classList.remove("cursor-info")
})
})