どうも7noteです。カーソルにくっつける要素を作ります。
こんな感じのものを作ります。
このようにカーソルについてくる要素の作り方について解説していきます。
ゆっくり動かしたり、カーソルを好きな画像に変える方法も紹介していきます。
作り方
index.html
<divid="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(){varcursor=$("#cursor");// カーソルになる要素を指定$(document).on("mousemove",function(e){// マウスカーソルが動いた時に実行varx=e.clientX;// カーソルの横座標を取得vary=e.clientY;// カーソルの縦座標を取得// 取得した座標をCSSに反映させるcursor.css({"top":y+"px","left":x+"px"});});});これで実行すれば、マウスカーソルにグレーの●がついてくると思います。
ダミーカーソルの表示位置をずらしたい
style.css
#cursor{/* 以下を追記 */margin:000-20px;/* 表示位置を左に20pxずらす */}表示位置はカーソルの左上起点になっているので、marginやネガティブマージンを使って調整が可能です。
ダミーカーソルをふわっと動かしたい
style.css
#cursor{/* 以下を追記 */transition:all.2sease-out;/* 1コマ1コマ、0.2秒かけて動かすことでふわっと動く */}カーソルを好きな画像に変える
index.html
<divid="cursor"><imgsrc="sample.png"alt=""></div> /* imgタグを設定 */
style.css
body{cursor:none;/*本物のカーソルを非表示に*/}#cursor{/* 必要なCSSを記述 */}要素をくっつけているだけなので、カーソルを非表示にして代わりに画像を挿入するだけで簡単に作成することができます。
まとめ
どのホームぺージでも一番見られている場所って、カーソルだと思うんですよね（PCだけですが）。
なのでカーソルに注目してUIやUXを変えていくというのは面白いのかもしれません。
広告がくっついてるカーソルとかも見たことがありますが、個人的には見にくくなってしまうのであんまりかもしれませんね。
ただスマートフォンはもちろんカーソルが出ないので、カーソルが変わらないと困るような作りのホームぺージにはしない方がよいでしょう！
おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ