초보자도 간단! 마우스 커서에 오는 사람을 만드는 법
아무래도 7note입니다. 커서에 붙는 요소를 만듭니다.
이런 느낌의 것을 만듭니다.
이렇게 커서에 오는 요소를 만드는 방법에 대해 설명합니다.
천천히 움직이거나 커서를 좋아하는 이미지로 바꾸는 방법도 소개합니다.
만드는 방법
index.html<div id="cursor"></div> <!-- カーソルについてくる要素 -->
stye.css#cursor{
position: fixed; /* 絶対位置になるように指定 */
z-index: 2; /* 重なり順を上に指定。他の要素に合わせて数字を大きくしてください。 */
pointer-events: none;/*【重要】マウス直下に常に画像があるので、全てをクリックできなくなる。noneにして対応*/
/* 以下ついてくる要素の見た目のCSS */
width: 15px;
height: 15px;
background: #CCC;
border-radius: 50%;
}
script.js$(function(){
var cursor=$("#cursor"); // カーソルになる要素を指定
$(document).on("mousemove",function(e){ // マウスカーソルが動いた時に実行
var x=e.clientX; // カーソルの横座標を取得
var y=e.clientY; // カーソルの縦座標を取得
// 取得した座標をCSSに反映させる
cursor.css({
"top":y+"px",
"left":x+"px"
});
});
});
이것으로 실행하면, 마우스 커서에 회색의 ●가 붙어 온다고 생각합니다.
더미 커서의 표시 위치를 이동하고 싶습니다.
style.css#cursor{
/* 以下を追記 */
margin: 0 0 0 -20px; /* 表示位置を左に20pxずらす */
}
표시 위치는 커서의 좌상 기점이 되어 있으므로, margin나 네거티브 마진을 사용해 조정이 가능합니다.
더미 커서를 살짝 움직이고 싶다.
style.css#cursor {
/* 以下を追記 */
transition: all .2s ease-out; /* 1コマ1コマ、0.2秒かけて動かすことでふわっと動く */
}
커서를 원하는 이미지로 변경
다른 기사에서 정리하고 있습니다.
요약
어느 홈페이지에서도 가장 볼 수 있는 곳은 커서라고 생각하네요(PC뿐입니다만).
그래서 커서에 주목해 UI나 UX를 바꾸어 가는 것은 재미있을지도 모릅니다.
광고가 붙어 있는 커서라든지 본 적이 있습니다만, 개인적으로는 보기 어려워져 버리기 때문에 너무 있을지도 모르겠네요.
단지 스마트폰은 물론 커서가 나오지 않기 때문에 커서가 변하지 않으면 곤란한 제작 홈페이지에는 하지 않는 것이 좋을 것입니다!
소마츠!
~ Qiita에서 매일 게시 중!! ~
【초보자용】WEB 제작의 조금 테크 모임
Reference
이 문제에 관하여(초보자도 간단! 마우스 커서에 오는 사람을 만드는 법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/7note/items/b369d24ffb4e52e77546
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<div id="cursor"></div> <!-- カーソルについてくる要素 -->
#cursor{
position: fixed; /* 絶対位置になるように指定 */
z-index: 2; /* 重なり順を上に指定。他の要素に合わせて数字を大きくしてください。 */
pointer-events: none;/*【重要】マウス直下に常に画像があるので、全てをクリックできなくなる。noneにして対応*/
/* 以下ついてくる要素の見た目のCSS */
width: 15px;
height: 15px;
background: #CCC;
border-radius: 50%;
}
$(function(){
var cursor=$("#cursor"); // カーソルになる要素を指定
$(document).on("mousemove",function(e){ // マウスカーソルが動いた時に実行
var x=e.clientX; // カーソルの横座標を取得
var y=e.clientY; // カーソルの縦座標を取得
// 取得した座標をCSSに反映させる
cursor.css({
"top":y+"px",
"left":x+"px"
});
});
});
#cursor{
/* 以下を追記 */
margin: 0 0 0 -20px; /* 表示位置を左に20pxずらす */
}
#cursor {
/* 以下を追記 */
transition: all .2s ease-out; /* 1コマ1コマ、0.2秒かけて動かすことでふわっと動く */
}
Reference
이 문제에 관하여(초보자도 간단! 마우스 커서에 오는 사람을 만드는 법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/7note/items/b369d24ffb4e52e77546텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)