SBDB_뉴유 SBDB_뉴유

const mouseImg = document.querySelectorAll(".mouse__img") mouseImg.forEach((item) => { const imageWrap = item.querySelector(".img"); const imageWrapBounds = imageWrap.getBoundingClientRect(); let itemBounds = item.getBoundingClientRect(); const onMouseEnter = () => { gsap.set(imageWrap, {xPercent: -50, yPercent: 50, rotation: -15, scale: 0.3, opacity: 0}) gsap.to(imageWrap, {xPercent: -50, yPerc..

function mousemove(e){ let positionSlow = (e.pageX - (window.innerWidth/2)) * 0.1; let positionFast = (e.pageX - (window.innerWidth/2)) * 0.2; gsap.to(".spanSlow", {duration: 0.4, x: positionSlow}) gsap.to(".spanFast", {duration: 0.4, x: -positionFast}) gsap.to(".cursor", {duration: 0.3, left: e.pageX, top: e.pageY}) } document.addEventListener("mousemove", mousemove)

const circle = document.querySelector(".cursor").getBoundingClientRect(); function mouseMove(e){ //마우스 좌표 값 let mousePageX = e.pageX; let mousePageY = e.pageY; //마우스 좌표 기준점을 가운데로 변경 let centerPageX = window.innerWidth/2 - mousePageX; let centerPageY = window.innerHeight/2 - mousePageY; //최소값을 -100 최대값을 100 설정 let maxPageX = Math.max(-100, Math.min(100, centerPageX)); let maxPageY = Math.max(-100..

const circle = document.querySelector(".cursor").getBoundingClientRect(); document.querySelector(".mouse__img").addEventListener("mousemove", e => { document.querySelector(".cursor").style.opacity = "1"; //커서 gsap.to(".cursor", {duration: .2, left: e.pageX - circle.width/2, top: e.pageY - circle.height/2}); //마우스 좌표 값 let mousePageX = e.pageX; let mousePageY = e.pageY; //마우스 좌표 값을 가운데 초기화 //전체 가..

function follow(e){ // const circle = document.querySelector(".cursor").clientWidth; //190: border 값 빠진 상태 // const circle = document.querySelector(".cursor").offsetWidth; //200: border 값 포함 상태 const circle = document.querySelector(".cursor").getBoundingClientRect(); //bottom, height, left, right, top, width, x, y // console.log(circle); // console.log(circle.width); gsap.to(".cursor", {duration..

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.to(cursor, {duration: .3, left: e.pa..

//출력용 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").innerHTM..