Canvasとは
Canvasとは、ブラウザ上に図を描くために策定された仕様です。
これまでHTML上で図を表現するためには、GIFやJPEGといったフォーマットの画像を用意する必要がありました。また、条件に応じて表示する図を変化させたり、アニメーションを実現するために、FlashやJavaアプレットが使われてきました。
Canvasは、FlashやJavaのようにプラグインを使わずに、JavaScriptベースで図を描くことができます。
Canvasは、もともとはAppleが発祥で、当初、Mac OSでおなじみのDashboardで使われた技術仕様です。その後、Apple、Mozilla Foundation、Opera Softwareといったブラウザベンダが立ち上げたWHATWGという団体にて策定作業が行われていた「Web Applications」と呼ばれる規格に採用されました。
See the Pen
Particle & Mouse stalker by yachin29 (@yachin29)
on CodePen.
さらにカーソルがマウスに追随する、「マウスストーカー」を導入してみましょう。
https://school.yachin29.com/0414/
https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.1/TweenMax.min.js
<div class="cursor"></div> <div class="follower"></div>
それと
var cursor = $('.cursor'), follower = $('.follower'), cWidth = 6, //カーソルの大きさ fWidth = 30, //フォロワーの大きさ delay = 5, //数字を大きくするとフォロワーがより遅れて来る mouseX = 0, //マウスのX座標 mouseY = 0, //マウスのY座標 posX = 0, //フォロワーのX座標 posY = 0; //フォロワーのX座標 //カーソルの遅延アニメーション //ほんの少ーーーしだけ遅延させる 0.001秒 TweenMax.to({}, .001, { repeat: -1, onRepeat: function() { posX += (mouseX - posX) / delay; posY += (mouseY - posY) / delay; TweenMax.set(follower, { css: { left: posX - (fWidth / 2), top: posY - (fWidth / 2) } }); TweenMax.set(cursor, { css: { left: mouseX - (cWidth / 2), top: mouseY - (cWidth / 2) } }); } }); //マウス座標を取得 $(document).on('mousemove', function(e) { mouseX = e.pageX; mouseY = e.pageY; }); //ボタンにホバーした時 $('.cursor-on').on({ "mouseenter": function() { cursor.addClass('is-active'); follower.addClass('is-active'); }, "mouseleave": function() { cursor.removeClass('is-active'); follower.removeClass('is-active'); } });