<![CDATA[
<p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>눈은 마우스 커서 애니메이션을 따릅니다. </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>~에 의해점쟁이-2023년 11월 15일0 코멘트 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>눈은 자바스크립트에서 마우스 커서를 따릅니다. </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>이번 블로그 게시물에서는 Eyes Follow Mouse Cursor 애니메이션을 만드는 방법을 알아봅니다. 주로 JavaScript를 사용하여 제작하는 인기 있는 인터랙티브 애니메이션입니다. Javascript eyes follow mouse effect라는 이 코드 조각에서는 마우스 커서의 위치에 따라 웹 페이지에서 애니메이션 눈의 움직임이 결정됩니다. 이 자바스크립트 애니메이션에서는 마우스 좌표에 따라 눈의 안구가 움직입니다. 다음 비디오 튜토리얼에서는 이 JavaScript 조각을 만드는 방법을 단계별로 보여줍니다. 소스 코드를 수집하기 전에 비디오 튜토리얼을 잘 살펴보세요. 콘텐츠가 마음에 들면 채널을 구독하세요. </b></span><br><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>비디오 튜토리얼: </b></span><br><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>위의 비디오 튜토리얼을 보셨기를 바랍니다. JavaScript는 강력한 스크립팅 언어입니다. 동적 정보 조작, 이벤트 처리, CSS 통합, 캔버스 그리기 지원 등을 위한 도구를 사용하여 JavaScript를 사용하면 개발자가 놀라운 애니메이션을 제작할 수 있습니다. 이 "눈은 마우스 커서를 따릅니다" 애니메이션은 모든 웹페이지에서 유쾌하고 매력적인 기능입니다. 방문자의 관심을 사로잡는 데 도움이 되며 상호작용성을 제공합니다. </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>Eyes Follow Mouse Cursor 애니메이션을 만들기 위해 'wrapper'라는 이름의 div를 사용했습니다. 그리고 'balls'라는 이름의 두 개의 div가 있습니다. 그 안으로 데려갔습니다. '공' div는 눈과 눈알을 만드는 데 사용됩니다. CSS에서는 Flexbox를 사용하여 컨테이너 div '래퍼'를 가져왔습니다. 뷰포트 중앙으로 이동합니다. 그런 다음 '공'의 상대적 위치에 따라 눈과 안구를 디자인합니다. div 및 해당 의사 요소 ':before' 절대적인 위치. 그런 다음 '마우스 이동'을 만들었습니다. JavaScript의 이벤트 리스너를 사용하여 '공'의 요소를 이동합니다. 중심을 기준으로 한 마우스의 위치를 ​​기준으로 클래스를 지정합니다. </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>당신은 또한 좋아할 것입니다: </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>Bootstrap 5를 사용한 랜딩 페이지 디자인 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>Bootstrap 5 캐러셀의 썸네일 </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>눈은 마우스 커서 애니메이션을 따릅니다. [ 소스 코드 ]: </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>이 '눈이 마우스 커서를 따르는 애니메이션'을 만들려면; 스니펫을 사용하려면 먼저 HTML 및 CSS 파일을 만듭니다. 여기에 사용된 JavaScript 코드를 HTML 파일 아래에 배치하거나 별도의 js 파일을 만들어 거기에 js 파일을 링크할 수 있습니다. HTML 아래의 스크립트 태그 안에 코드를 넣습니다. 파일을 생성한 후 다음 코드 상자에서 코드를 복사하여 프로젝트 파일에 붙여넣습니다. 브라우저에서 코드를 열고 작동하는지 확인하세요. 작동하지 않으면 아래 다운로드 버튼에서 코드를 다운로드하세요. </b></span><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>HTML 추가: </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><!DOCTYPE html> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><html lang="en"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><!-- divinectorweb.com --> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><head> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <meta charset="UTF-8"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <meta http-equiv="X-UA-Compatible" content="IE=edge"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <meta name="viewport" content="width=device-width, initial-scale=1.0"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <title>Eyes Follow Mouse Cursor in JavaScript</title> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <link rel="stylesheet" href="style.css"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></head> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><body> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <div class="wrapper"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <div class="balls"></div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <div class="balls"></div>  </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </div> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <script> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        document.querySelector("body").addEventListener("mousemove", animate); </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        function animate() { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        let wrapper = document.querySelectorAll(".balls"); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        wrapper.forEach((balls) => { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            let x = balls.getBoundingClientRect().left + balls.clientWidth / 2; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            let y = balls.getBoundingClientRect().top + balls.clientHeight / 2; </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            let radian = Math.atan2(event.pageX - x, event.pageY - y); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            let rotate = radian * (180 / Math.PI) * -1 + 270; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            balls.style.transform = `rotate(${rotate}deg)`; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        }); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        } </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </script>   </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></body> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></html> </b></span><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>복사 </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>CSS를 추가하세요: </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>* { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>margin: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>padding: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>box-sizing: border-box; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>body { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>display: flex; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>justify-content: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>align-items: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>height: 100vh; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>background-color: #1a252b; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.wrapper { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>position: relative; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>top: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>display: flex; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.wrapper .balls { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>position: relative; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>width: 70px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>height: 70px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>display: block; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>background: white; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>border-radius: 50%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>margin: 0 15px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.wrapper .balls::before { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>content: ""; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>position: absolute; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>top: 50%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>left: 20px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>transform: translate(-50%, -50%); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>width: 30px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>height: 30px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>border-radius: 50%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>background: #262626; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>복사 </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>Eyes Follow Mouse Cursor 자바스크립트 코드가 제대로 작동하길 바랍니다. 이와 같은 더 많은 코드 조각을 보려면 홈페이지에서 추가 로드 버튼을 클릭하세요. 저희 홈페이지를 방문해 주셔서 진심으로 감사드립니다. </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>코드 다운로드</b></span></p>
<!-- -->
]]>
카페 게시글
♥☞HTML 코드방◈▶
눈은 마우스 커서 애니메이션을 따릅니다
gyun님
추천 0
조회 6
23.12.19 20:04
댓글 0
다음검색
