Effect/mouse5 마우스 이펙트 05 마우스 이펙트 05 기울기 효과 / 글씨 반전효과 원본 소스 보기 원본 사이트 보기 script 코드 const 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(-200, Math.min(200, centerPageX)); let maxPageY = Math.max(-200, Math.. 2022. 9. 28. 마우스 이펙트 04 마우스 이펙트 04 - 이미지 효과 원본 소스 보기 원본 사이트 보기 script 코드 const cursor = document.querySelector(".mouse__cursor"); const cursorRect = cursor.getBoundingClientRect(); document.querySelector('.mouse__wrap figure').addEventListener("mousemove", (e) => { // 커서 gsap.to(cursor, { duration: .5, left: e.pageX - cursorRect.width / 2, top: e.pageY - cursorRect.height / 2, }); // 마우스좌표 값 let mousePageX = e.pageX; l.. 2022. 9. 22. 마우스 이펙트 03 마우스 이펙트 03 - 조명 효과 원본 소스 보기 원본 사이트 보기 script 코드 const cursor = document.querySelector('.mouse__cursor') // const circleW = cursor.offsetWidth //200 // const circleH = cursor.offsetHeight //200 // const circle2 = cursor.clientWidth //190 : 보더값 제외 const circle = cursor.getBoundingClientRect() console.log(circle) // const DOMRect = { // x: 0, // y: 0, // bottom: 200, // height: 200, // left: 0, // .. 2022. 9. 22. 마우스 이펙트 02 마우스 이펙트02 마우스의 위치값 표시 , 특정 글자에 갖대 대면 애니메이션 이 나온다. 원본 소스 보기 원본 페이지 보기 HTML <section id="mouseType"> <div class="mouse__cursor"></div> <div class="mouse__wrap"> <p>The <span class="style1">future</span> <span class="style2">depends</span> on What we do in the<span class="style3"> present.</span> </p> <p><span class="style4">미래</span>는 현재 .. 2022. 9. 19. 마우스 이펙트 01 마우스 이펙트01 마우스의 위치값 표시 , 특정 글자에 갖대 대면 애니메이션? 이 나온다. 원본 소스 보기 원본 페이지 보기 HTML <section id="mouseType"> <div class="mouse__cursor"></div> <div class="mouse__wrap"> <p>The <span class="style1">future</span> <span class="style2">depends</span> on What we do in the<span class="style3"> present.</span> </p> <p><span class="style4">미래</span>는 현재.. 2022. 9. 5. 이전 1 다음
