こんにちは、ウェブラボクリエイターズメモです。
ネットサーフィンをしていると稀に見かける、マウスカーソルからキラキラが降り注いだり、マウスカーソルに何かがついてきたりするやつ。いわゆる「マウスストーカー」。
サイトのデザインにアイデンティティを持たせるだけでなく、マウスカーソルの見失い防止や、押せるボタンの強調などにも役立ちます！
マウスカーソルのカスタマイズやマウスストーカーの作り方を4種類ご紹介します。
1.マウスカーソルの変更
マウスカーソルを、矢印ではなく画像など別の要素に置き換えます。
DEMOをご覧ください。aタグホバー時に強調したりすることもできます。
DEMO
必要なHTML
<body> <!--body直下にカーソルとなる要素を配置--> <p id="cursor"><img src="_img/img_mark_nikukyu.png" alt="肉球"></p> <!--↓contents↓--> </body>
カーソルの代わりとなる要素をbody直下に配置してください。
必要なCSS
/*マウスカーソルの変更*/
body{
position: relative;
cursor: none;/*本物のカーソルを非表示に*/
}
body a:hover{
cursor: none;/*aタグホバーのカーソルも非表示に*/
}
#cursor{
position: fixed;
width: 40px;
height: 40px;
margin: -20px 0 0 -20px;/*半分引いてカーソル先端に画像中心位置が来るように*/
z-index: 2;/*一番手前に来るように*/
pointer-events: none;/*【重要】マウス直下に常に画像があるので、全てをクリックできなくなる。noneにして対応*/
transition: transform 0.1s;
opacity: 0;/*開いた瞬間非表示*/
}
#cursor.active{
transform: scale(1.8);
}4行目でページ全体でのcursorを非表示にします。
ここで、カーソル位置の最前面に常に要素があるということは、どこもクリックできなくなってしまうということなので、17行目でpointer-events:noneを指定する必要があります。
後述するjQueryで、aタグホバー時にactiveクラスを付与します。23行目にその際カーソル要素を拡大する記述をしています。
必要なjQuery
$(function(){
//マウスカーソルの変更
//=================================
//カーソル要素
var cursor=$("#cursor");
//mousemoveイベントでカーソル要素を移動
$(document).on("mousemove",function(e){
//マウス位置を取得するプロパティ
var x=e.pageX;
var y=e.pageY;
//カーソル要素のcssを書き換え。重複しなければtransformを使うのがおすすめ
cursor.css({
"opacity":"1",
"top":y+"px",
"left":x+"px"
});
});
//aタグホバー
$("a").on({
"mouseenter": function() {
//activeクラス付与
cursor.addClass("active");
},
"mouseleave": function() {
cursor.removeClass("active");
}
});
});10、11行目でカーソルの座標位置を取得し、
13～17行目でカーソル要素のcssに代入しています。
今回はaタグホバーでカーソル要素にtransformを使用したかったので、ここではtopとleftを書き換えています。
2.遅れてついてくるマウスストーカー
マウスストーカーに遅れてついてくるストーカー要素を追加します。
DEMO
必要なHTML
<body> <!--body直下にカーソルとなる要素を配置--> <p id="cursor"><img src="_img/img_mark_nikukyu.png" alt="肉球"></p> <!--body直下にマウスストーカーとなる要素を配置--> <div id="stalker"></div> <!--↓contents↓--> </body>
マウスカーソルとなる要素と別に、ストーカーとなる要素をbody直下に配置します。
必要なCSS
/*ちょっと遅れてくるマウスストーカー*/
body{
position: relative;
cursor: none;/*本物のカーソルを非表示に*/
}
body a:hover{
cursor: none;/*aタグホバーのカーソルも非表示に*/
}
/*カーソル*/
#cursor{
position: fixed;
width: 40px;
height: 40px;
margin: -20px 0 0 -20px;/*半分引いてカーソル先端に画像中心位置が来るように*/
z-index: 3;/*一番手前に来るように*/
pointer-events: none;/*【重要】マウス直下に常に画像があるので、全てをクリックできなくなる。noneにして対応*/
transition: transform 0.1s;
opacity: 0;/*開いた瞬間非表示*/
}
#cursor.active{
transform: scale(1.8);
}
/*ストーカー要素*/
#stalker{
position: fixed;
width: 60px;
height: 60px;
z-index: 2;/*一番手前に来るように*/
pointer-events: none;/*【重要】マウス直下に常に画像があるので、全てをクリックできなくなる。noneにして対応*/
background: url(../_img/img_pet_cat_oddeye_black.png) 50% 50% no-repeat;
background-size: contain;
opacity: 0;/*開いた瞬間非表示*/
}
#stalker.active{
background: url(../_img/img_pet_cat_oddeye.png) 50% 50% no-repeat;
background-size: contain;
}カーソル要素については1と同じポイントに注意してください。
33行目で、ストーカー要素についてもクリック無効化しています。
必要なjQuery
$(function(){
//ちょっと遅れてくるマウスストーカー
//=================================
//カーソル要素
var cursor=$("#cursor");
//ちょっと遅れてくる要素
var stalker=$("#stalker");
//mousemoveイベントでカーソル要素を移動
$(document).on("mousemove",function(e){
//マウス位置を取得するプロパティ
var x=e.pageX;
var y=e.pageY;
//カーソル要素のcssを書き換え。重複しなければtransformを使うのがおすすめ
cursor.css({
"opacity":"1",
"top":y+"px",
"left":x+"px"
});
//ちょっと遅れて要素のcssを書き換え
setTimeout(function(){
stalker.css({
"opacity":"1",
"transform":"translate("+x+"px,"+y+"px)"
});
},100);
});
//aタグホバー
$("a").on({
"mouseenter": function() {
//activeクラス付与
cursor.addClass("active");
stalker.addClass("active");
},
"mouseleave": function() {
cursor.removeClass("active");
stalker.removeClass("active");
}
});
});24～29行目でsetTimeoutを使い、マウスを動かした0.1秒後にストーカー要素のcssを書き換えています。
3.速く動かすとデカくなるマウスストーカー
単位あたりの移動距離を計算し、cssの値として使用します。
今回はtransform scaleの値とすることにより速いとデカくなります。ネタ枠で作りましたが、他にもカラーコードを変更したり、意外と応用できそうです。
DEMO
必要なHTML
<body> <!--body直下にカーソルとなる要素を配置--> <p id="cursor"><img src="_img/img_mark_nikukyu.png" alt="肉球"></p> <!--↓contents↓--> </body>
1と同様です。
必要なCSS
/*速いとデカくなるマウスストーカー*/
body{
position: relative;
cursor: none;/*本物のカーソルを非表示に*/
}
body a:hover{
cursor: none;/*aタグホバーのカーソルも非表示に*/
}
#cursor{
position: fixed;
width: 60px;
height: 60px;
margin: -30px 0 0 -30px;/*半分引いてカーソル先端に画像中心位置が来るように*/
z-index: 2;/*一番手前に来るように*/
pointer-events: none;/*【重要】マウス直下に常に画像があるので、全てをクリックできなくなる。noneにして対応*/
background: url(../_img/img_pet_cat_oddeye_black.png) 50% 50% no-repeat;
background-size: contain;
opacity: 0;/*開いた瞬間非表示*/
}
#cursor.active{
background: url(../_img/img_mark_nikukyu.png) 50% 50% no-repeat;
background-size: contain;
}1と同様です。
必要なjQuery
$(function(){
//速く動かすとデカくなるマウスストーカー
//=================================
//カーソル要素
var cursor=$("#cursor");
//xy座標
var x=0;
var y=0;
//拡大倍率
var scale=1;
//mousemoveイベントでカーソル要素を移動
$(document).on("mousemove",function(e){
//移動後のxy座標
var newX=e.pageX;
var newY=e.pageY;
//移動量に対する拡大倍率
var newScale=(1+Math.abs((newX+newY)-(x+y))*0.05);
//滑らかにするため、移動前の拡大倍率との平均を取る
scale=(newScale+scale)/2;
//ここでマウス位置を更新
x=newX;
y=newY;
//カーソル要素のcssを書き換え。
cursor.css({
"opacity":"1",
"transform":"translate("+x+"px,"+y+"px) scale("+scale+")"
});
});
//aタグホバーで何かしたいとき
$("a").on({
"mouseenter": function() {
//activeクラス付与
cursor.addClass("active");
},
"mouseleave": function() {
cursor.removeClass("active");
}
});
});少し複雑です。
移動前の座標を残したいので、座標用の変数x、yはグローバルに宣言します。
16、17行目で移動後の座標位置をnewX、newYとし、
19行目で移動前との差を出します。その際に、カーソルを左から右へ移動した場合はいいのですが、右から左へ移動した場合に差がマイナスになってしまうため、Math.absで差の絶対値としています。
一通り欲しい値を出し終わったら、23、24行目でグローバル変数を更新しています。
4.キラキラ降りそそぐマウスストーカー
DEMO
本当はもっと小さくてキラキラした要素を降り注がせるのですが、DEMOを見ていただいたら分かる通りここまで猫で来てしまったので、ここでは中くらいの肉球を降り注がせます。
必要なHTML
<body> <!--↓contents↓--> </body>
jQueryで要素を出力するため、特に必要ありません。
必要なCSS
/*キラキラ降りそそぐマウスストーカー*/
.shine{
position: fixed;
top: -15px;
left: -15px;
width: 30px;
height: 30px;
background: url(../_img/img_mark_nikukyu.png) 50% 50% no-repeat;
background-size: contain;
z-index: 2;
animation: shine 2s ease-out 0s forwards;
}
@keyframes shine{
0%{
transform: translateY(0) rotate(-5deg);
opacity: 0;
}
5%{
opacity: 1;
}
80%{
opacity: 1;
}
100%{
transform: translateY(50px) rotate(5deg);
opacity: 0;
}
}shineというクラス名の要素を出力していきます。
クラス名は適宜変更していただいて構いませんが、たくさん出るのでidは使わないでくださいね。また、降りそそぐ動きはCSSのkeyframesで定義しています。
ここでは2秒かけて少し回転しながら50px下に移動、opacityでふわっと感を演出しています。
必要なjQuery
$(function(){
//キラキラ降りそそぐマウスストーカー
//=================================
var body=$("body");
//キラキラ頻度調整用フラッグ
var flag=true;
//mousemoveイベントでカーソル要素を移動
$(document).on("mousemove",function(e){
if(flag){
//マウス位置を取得するプロパティ
var x=e.pageX;
var y=e.pageY;
//キラキラ要素生成
var shine=$("<p>").attr("class","shine");
shine.css({
"top":y+"px",
"left":x+"px"
});
//body直後に配置
body.prepend(shine);
//2秒後に削除
setTimeout(function(){
shine.remove();
},2000);
//一旦新しい要素生成をストップ
flag=false;
//0.1s後に解除
setTimeout(function(){
flag=true;
},100);
}
});
});17行目で新しくpタグの要素を生成し、
18行目で初期のtop、left値を設定し、
23行目でbodyタグ直後に挿入しています。
25行目で2秒後にpタグ要素を削除しています。cssのanimationに合わせて時間を調整してください。
また、それだけだと要素が出すぎてしまうので、
30～34行目で要素を出した瞬間から0.1秒間は要素を生成しないようにしています。
おわりに
どうでしたか？
がむしゃらに使っては鬱陶しくなってしまうだけですが、うまく取り入れてサイトにアクセントを加えてみてください！
以上、ウェブラボクリエイターズメモでした。
