마우스 포인터를 따라 움직이는 원형 애니메이션 효과 추가하기 (제공자: TEO)
중요: 이 문서는 외부 제작자가 제공한 가이드 문서로, 모든 저작권은 이 문서를 제공한 디자이너 또는 회사에 있으며, 아임웹에서 기술 및 고객지원은 불가합니다.
디자인 모드의 기본 기능만으로도 충분히 멋진 웹사이트를 만들 수 있지만, 코드 위젯에 HTML, CSS, JavaScript 와 같은 코드를 활용하면 더 특별한 디자인도 가능합니다.
이 도움말에서는 지난 10월 21일에 진행된 레벨 업! 디자인 모드 Feat. 테오 교육에서 테오님이 제공해 주신 소스 코드를 내 사이트에 적용해, 마우스 포인터를 따라 움직이는 원형 애니메이션 효과를 추가하는 방법을 알아봅니다.
이 도움말의 제공자
- 제공자: TEO(테오)
- 연락 또는 문의: vkstn0817@naver.com
튜토리얼
- 내 사이트 관리자 페이지에 접속합니다. 접속방법
- 왼쪽 메뉴에서 [환경설정 > SEO(검색엔진최적화)]를 클릭해 이동합니다.
- 마우스 휠 스크롤을 움직여 Body code 입력 칸으로 이동합니다.
아래의 코드를 모두 드래그 후 복사합니다. (키보드 단축키: CTRL + C)
<style> #doz_body { position: relative; } .pointer { z-index: 999999; margin-top: 16px; margin-left: 16px; position: absolute; width: 32px; height: 32px; border-radius: 40px; border: 2px solid #000; background: #000; } @media screen and (max-width: 1200px) { .pointer { display: none !important; } } </style> <html> <div class="pointer"></div> </html> <script> var pointSize = $(".pointer").width() / 2; $("#doz_body").mousemove(function(e) { $('.pointer').css("top", e.pageY - pointSize); $('.pointer').css("left", e.pageX - pointSize); $('.pointer').fadeIn(); }); // Mouse Following // Basic $(".btn,input,a,textarea").on("mouseover", function() { $('.pointer').css({ "width": "68px", "height": "68px", "background": "none", "transition-property": "width,height,background", "transition-duration": "0.5s" }); }); // Hover $(".btn,input,a,textarea").on("mouseout", function() { $('.pointer').css({ "width": "32px", "height": "32px", "background": "#000", "transition-property": "width,height,background", "transition-duration": "0.5s" }); }); // Mouseout </script>Body code 입력 칸에 붙여넣습니다. (키보드 단축키: CTRL + V)
- 저장 버튼을 클릭해 적용합니다.
- 왼쪽 메뉴 상단의 사이트 바로가기 를 클릭해 내 사이트에 접속합니다.
마우스 포인터 효과가 적용된 걸 확인할 수 있습니다. (이 코드는 모바일 기기에서는 동작하지 않게 설계되었습니다.)
참고: 작업 중 도움이 필요한 경우, 위 이 도움말의 제공자 항목에 기재된 연락처로 문의하실 수 있습니다.