Effect/MouseEffect5 [자바스크립트 응용] 마우스 효과06_ 기울기 효과 마우스 효과 06 마우스 효과 여섯번째 시간입니다. 텍스트에 기울기 효과를 주고 오버시 글씨에 반전효과도 줘 보겠습니다. 원본 소스 보기 원본 사이트 ■ n줄 요약 ▶ 텍스트에 hover시, 마우스커서에 "mix-blend-mode : difference"를 주어 마우스포인터(원)이 겹치는 부분에 반전효과를 줄 수 있습니다. 텍스트는 skew를 주어 비틀기효과(≒기울기)를 줄 수 있고, "overflow:hidden"을 통해 마치 두개의 글씨가 이어져있지만 반반씩 달라보이는 효과를 줍니다. HTML 소스 "i thought you would" "i thought you would" If you know please tell me in advance If you know please tell me in a.. 2022. 10. 3. [자바스크립트 응용] 마우스 효과05_ 반전 효과 마우스 효과 05 마우스 효과 다섯번째 시간입니다. "mouse__cursor"에 반전효과를 부여하고 마우스 위치에 따라 이미지가 약간씩 기우는 효과를 만들어 보겠습니다. 원본 소스 보기 원본 사이트 ■ n줄 요약 ▶ 마우스커서에 "mix-blend-mode : difference"를 주어 마우스포인터(원)이 겹치는 부분에 반전효과를 줄 수 있습니다. 이미지에는 "transform-style : preserve-3d"를 주어서 3D효과를 줍니다. JS 소스 const mouseMove = (e) => { // 마우스 좌표값 let mousePageX = e.pageX; let mousePageY = e.pageY; // 마우스 좌표 기준점을 가운데로 변경 let centerPageX = window.in.. 2022. 10. 3. [자바스크립트 응용] 마우스 효과 04 ( 무슨 효과라 해야할지 모르겠음 ^^) 마우스 효과 04 이번 시간에는 정가운데에 있는 그림내부에서만 마우스오버 효과가 작동하고, 이미지가 마우스위치에 따라서 살짝씩 움직이는 효과를 만들어보겠습니다. 원본 소스 보기 원본 사이트 ■ n줄 요약 ▶ 그림 위에 클릭이벤트(마우스오버)를 부여해서 그림위에서만 작동할 수 있게 구성하고, 그림의 이동은 마우스좌표값을 화면의 정가운데로 초기화 시킨 뒤 그 값에 포인터 좌표값을 빼주어서 이동효과를 부여합니다. JS 소스 const cursor = document.querySelector(".mouse__cursor"); const cursorRect = cursor.getBoundingClientRect(); document.querySelector(".mouse__wrap figure").addEvent.. 2022. 9. 22. [자바스크립트 응용] 마우스 효과02_ 마우스를 천천히 따라오게 만들어 보자! 마우스 효과 02 저번 마우스효과01에서는 마우스를 따라다니는 원을 만들어봤는데요. 이번에는 이 원이 좀더 부드럽고 천천히(?) 따라오게 만들어 보겠습니다. GSAP를 이용해서 이 효과를 구현해 보겠습니다. 원본 소스 보기 원본 사이트 JS 소스 ■ 핵심 찍먹하기🪓 ✔ GSAP CDN으로 항상 스크립트가져오셔야해요! gsap.to ()에는 2가지 필수값이 필요합니다. 바로 대상과 속성입니다. 그렇다면 우리 소스에서는 어떻게 작동하는걸까요? 우선 대상과 속성값이므로 "cursor"에 "{duration: 0.3, left: e.pageX -5, top: e.pageY -5});"속성을 부여하겠네요! 사용된 속성은 다음과 같습니다. - duration : 애니메이션의 지속시간을 설정합니다. 0.3s로 지정했.. 2022. 9. 18. [자바스크립트 응용]마우스 효과01 마우스 효과 01 이번시간에는 마우스관련 메서드를 이용해서 마우스를 따라다니는 효과를 만들어 보겠습니다. 또, 좌측하단에 각 메서드의 값들이 출력되게 해놨으니 어떻게 다른지 한번 보시면서 참고해보세요. 원본 소스 보기 원본 사이트 ▶ 좌측 하단에는 .mouse__info 를 이용해서 각 위치값에 대한 정보를 입력하고, 문구에 span태그와 class속성을 이용해서 마우스오버 효과도 각각 다르게 부여합니다. 마우스포인터가 사라지는 것은 cursor:none을 이용했습니다. JS 소스 window.addEventListener("mousemove", (event) => { document.querySelector(".clientX").innerText = event.clientX; document.query.. 2022. 9. 12. 이전 1 다음 반응형
