Gentleman'study 젠틀맨

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

hljs.highlightAll();// 코드 나타낼때 쓰는 스크립트 const modal = function(){// modal 창 띄우는 함수 만들기. document.querySelector(".source-btn").addEventListener("click", () => {// 소스보기 버튼을 클릭하면 document.querySelector("#modal").classList.add("show");// 모달창 보여주기 document.querySelector("#modal").classList.remove("hide");// 껏다가 켰을때 한번더 작동하기 위해 hide 클래스 제거 }) document.querySelector(".close").addEventListener("click", (..