Gentleman'study 젠틀맨

function getTwoDecimal(num) { return parseFloat(num.toFixed(2) + 0.5); } const mouse = { decimal(coord) { return getTwoDecimal(coord / 1000); }, x(e) { return Math.abs(e.clientX - window.innerWidth / 2); }, y(e) { return Math.abs(e.clientY - window.innerHeight / 2); } }; const changeTextAlphaVal = (txt, e) => { const root = document.querySelector(":root"); const cssVar = "--alpha"; const current..

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

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); 이번 효과는 CSS적인 부분에서 처리해야 될 게 많다..

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 // 최소값 : -50, 최대값 : 50 으로 설정 let maxPageX = Math.max(-300, Math.min(300, centerPageX)); let maxPageY = Math..

const circle3 = document.querySelector(".cursor").getBoundingClientRect(); document.querySelector(".mouse__img").addEventListener("mousemove", (e) => { gsap.to(".cursor", {duration: 0.2, left: e.pageX - circle3.width/2, top: e.pageY - circle3.height/2}) // 마우스 좌표 값 let mousePageX = e.pageX; let mousePageY = e.pageY; // 마우스 좌표 값 기준점을 가운데로 초기화 // 전체 길이 / 2 - 마우스 X 좌표값 let centerPageX = window.inne..

const circle3 = document.querySelector(".cursor").getBoundingClientRect(); // 모든 위치정보값 function follow(e){ gsap.to(".cursor", {duration: 0.3, left: e.pageX - (circle3.width / 2), top: e.pageY - (circle3.height / 2)}); //출력용 document.querySelector(".pageX").innerText = e.pageX; document.querySelector(".pageY").innerText = e.pageY; } window.addEventListener("mousemove", follow); 전체 사이트 보기 자바스크립트로 ..

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

window.addEventListener("mousemove", (e)=>{ document.querySelector(".clientX").innerText = e.clientX// 브라우저 기준 좌표값 document.querySelector(".clientY").innerText = e.clientY document.querySelector(".offsetX").innerText = e.offsetX// 요소 기준 좌표값 document.querySelector(".offsetY").innerText = e.offsetY document.querySelector(".pageX").innerText = e.pageX// 페이지 기준 좌표값 document.querySelector(".pageY").i..