Canvasでパーティクルを表現する

4-14

Canvasとは

Canvasとは、ブラウザ上に図を描くために策定された仕様です。

これまでHTML上で図を表現するためには、GIFやJPEGといったフォーマットの画像を用意する必要がありました。また、条件に応じて表示する図を変化させたり、アニメーションを実現するために、FlashやJava アプレットが使われてきました。
Canvasは、FlashやJavaのようにプラグインを使わずに、JavaScriptベースで図を描くことができます。
Canvasは、もともとはAppleが発祥で、当初、Mac OSでおなじみのDashboardで使われた技術仕様です。その後、Apple、Mozilla Foundation、Opera Softwareといったブラウザベンダが立ち上げたWHATWGという団体にて策定作業が行われていた「Web Applications」と呼ばれる規格に採用されました。

github.com

vincentgarreau.com

https://codepen.io/yachin29/pen/MWJGwwP

さらにカーソルがマウスに追随する、「マウスストーカー」を導入してみましょう。

https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.1/TweenMax.min.js

それと

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');
  }
});