初心者向け。jQueryを使ったコピペでできるマウスストーカー
1194 回閲覧されました
みなさんこんにちは、WEB制作のエンジニアのjonioです。
最近マウスストーカーが流行っている気がします。
マウスストーカーというのはサイトを見ている時に動かすマウスを青い丸が追いかけている物です。
2021年になっていきなり見るようになったと思うので多分流行りでいつまでこれが使われるかわからないですがコピペで作るやり方を解説します。
HTML
まずはマウスストーカーを使いたいページの<body></body>の間に下記のコードを書いてください。
<!-- マウスストーカー -->
<div id="cursor"></div>
<div id="stalker"></div>jQuery
次はjQueryです、下記のコードをjQueryのファイルに書いてください。
// ここからマウスストーカー
jQuery(function(){
var cursor=jQuery("#cursor");
var stalker=jQuery("#stalker");
jQuery(document).on("mousemove",function(e){
var x=e.clientX;
var y=e.clientY;
cursor.css({
"opacity":"1",
"top":y+"px",
"left":x+"px"
});
setTimeout(function(){
stalker.css({
"opacity":"1",
"top":y+"px",
"left":x+"px"
});
},140);
});
});
//マウスストーカーここまでCSS
//ここからマウスストーカー
body{
position: relative;
cursor: none;
}
#cursor{
position: fixed;
background: #FED833;
border-radius:7px;
width: 14px;
height: 14px;
margin: -7px 0 0 -7px;
z-index: 2;
pointer-events: none;
opacity: 0;
z-index:12;
@media screen and (max-width:767px){
display: none;
}
}
#stalker{
position: fixed;
background: #053657;
width: 30px;
height: 30px;
border-radius:30px;
margin: -15px 0 0 -15px;
z-index: 1;
pointer-events: none;
opacity: 0;
z-index:11;
@media screen and (max-width:767px){
display: none;
}
}
// マウスストーカーここまで色やマウスストーカーの形を変えたい場合は調節してください。
これで完成です。
私はWordPressサイトで使っていますがシステム開発のフロントエンドにもコピペで使えます。