근혁 study 공부정리

{ const mouseImg = document.querySelectorAll(".mouse__img"); mouseImg.forEach((item) => { //item = mouseimg const imageWrap = item.querySelector(".img") const imageWrapBounds = imageWrap.getBoundingClientRect(); //위치값을 가져옴 let itemBounds = item.getBoundingClientRect(); //item의 위치값 const onMouseEnter = () => { //마우스가 영역에 들어왔을때 gsap.set(imageWrap, {xPercent: -50, yPercent: 50, rotation: -15, scale..

{ 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; //전체 width값에서 - 마우스 좌표값 let centerPageY = window.innerHeight/2 - mousePageY; //최소값-50 최대값-50 설정 let maxPageX = Math.max(-800, Math.min(800, centerPageX)) //-800이하 8..

{ const circle = document.querySelector(".cursor").getBoundingClientRect(); document.querySelector(".mouse__img").addEventListener("mousemove", (e)=>{ //이미지안에서만 마우스 움직이게함 //커서 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; //전체가로 //window.innerWidth 1920 //브라우저 크기 //window.outeWidth..

{ // const circle1 = document.querySelector(".cursor").clientWidth; //190 : border 빠진 상태 알려줌 // const circle2 = document.querySelector(".cursor").offsetWidth //200 : border 포함 상태 const circle = document.querySelector(".cursor").getBoundingClientRect(); //bottom, height, left, right, top, width, x, y console.log(circle.width) //gsap를 쓰면 css이름 그대로 쓸 수 있음 left에 x값 top에는 y값을 넣음 function follow(e){ g..

{ 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.pageX -5, top: e.pageY -5}) gsap..

{ //출력용 화면에 X,Y값들을 마우스가 움직일때마다 나타나게 출력 window.addEventListener("mousemove", (event)=>{ document.querySelector(".clientX").innerText = event.clientX document.querySelector(".clientY").innerText = event.clientY document.querySelector(".offsetX").innerText = event.offsetX document.querySelector(".offsetY").innerText = event.offsetY document.querySelector(".pageX").innerText = event.pageX document.q..