코딩 공부 코딩 공부

const cursor = document.querySelector(".cursor"); //div.cursor const follower = document.querySelector(".cursor-follower"); //div.cursor-follower,커서에 점 따라다니는 효과 const hoverText = document.querySelectorAll(".mouse__wrap div p span"); let hover = 1; function move(e, hover){ gsap.to(cursor, { duration: .3, left: e.pageX - 5, top: e.pageY - 5 }) if(hover){ gsap.to(follower, { duration: .8, left: e.p..

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..

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..

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; //X: 최솟값은 -800 최댓값은 800, Y: 최솟값은 -300, 최댓값은 300 let maxPageX = Math.max(-800, Math.min(800, centerPageX));..

//div.cursor의 속성값 저장 const circle = document.querySelector(".cursor").getBoundingClientRect(); document.querySelector(".mouse__img").addEventListener("mousemove", (e) => { //div.cursor의 위치를 pageX,pageY로 받은 값에서 div.cursor의 크기 절반 값을 빼서 정 가운데로 위치시키게한다. gsap.to(".cursor", {duration: .2, left: e.pageX - circle.width/2, top: e.pageY - circle.height/2}); //마우스 좌표 값 let mousePageX = e.pageX; let mousePa..

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

const cursor = document.querySelector(".cursor"); //div.cursor const follower = document.querySelector(".cursor-follower"); //div.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(c..

//출력용 window.addEventListener("mousemove", (event) => { document.querySelector(".clientX").innerText = event.clientX; //현재창 기준 마우스커서 수평 좌표 document.querySelector(".clientY").innerText = event.clientY; //현재창 기준 마우스커서 수직 좌표 document.querySelector(".offsetX").innerText = event.offsetX; //좌표를 출력하도록 하는 이벤트가 걸려있는 DOM node를 기준으로 수평 좌표 document.querySelector(".offsetY").innerText = event.offsetY; //좌표를 ..