今回はjQueryでマウスをいじってみたいと思います。
PCで見てください！！
See the Pen Untitled by ryotsunekawa (@ryotsunekawa) on CodePen.
大まかな操作手順は次の通りです。
- htmlにjQueryとオリジナルjs,cssを読み込ます
- もともと存在するカーソルを非表示にさせて新しいカーソル要素を配置
- cssとjsをいじる。
さっそく実装してみます。
1. htmlにjQueryとオリジナルjs,cssを読み込ます
See the Pen Untitled by ryotsunekawa (@ryotsunekawa) on CodePen.
head内にcssを、body内にjsを読み込ませましょう！！
2.もともと存在するカーソルを非表示にして新しいカーソル要素を追加する
html内
<!-- 中略 -->
<!-- 新しいカーソル要素 -->
<body>
<div class="cursor">
<span class="dot1"></span>
<span class="dot2"></span>
</div>
<!-- 中略 -->css内
html {
cursor: none;
}
つね
今回はマウスを追従するような形にしたかったので要素を2つ足しました。
3.cssとjsをいじる
最後にcssでマウスのデザインを、jsで動きを付けて完成です！
css内
html {
cursor: none;
text-align: center;
}
.cursor span {
display: block;
border-radius: 100%;
transform: translate(-50%, -50%); /*マウスの位置が中心になるように*/
position: absolute;
z-index: 10;
pointer-events: none; /*カーソル要素にさせる*/
}
.cursor span.dot1 {
height: 10px;
width: 10px;
background-color: #000;
transition: width 0.2s, height 0.2s;
}
.cursor span.dot1.active {
height: 50px;
width: 50px;
background-color: #000;
opacity: 0.5;
}
.cursor span.dot2 {
height: 20px;
width: 20px;
border: solid 1px #000;
transition: top 0.2s, left 0.2s, width 0.5s, height 0.5s;
transition-timing-function: ease-out; /*マススの変化速度を変更*/
}
.cursor span.dot2.active {
height: 80px;
width: 80px;
}
js内
$(window).mousemove(function (e) {
$('.cursor span').css({
left: e.pageX,
top: e.pageY
})
})
/*クリックできるものに付与*/
$('a').on('mouseenter', function () {
$('.cursor span').addClass('active');
})
$('a').on('mouseleave', function () {
$('.cursor span').removeClass('active');
})つね
これらを全部実装したものがこちらです。
See the Pen Untitled by ryotsunekawa (@ryotsunekawa) on CodePen.
他にも画像を追従させることやマウスをキラキラにさせることなどもできます！！
最後までご覧いただきありがとうございました。
