webサイト制作の勉強|2022年5月クラス用ブログ

ファリカテクニカルアカデミーのwebサイト制作科の授業解説ブログです。フェリカテクニカルアカデミーは池袋にある求職者支援訓練の学校です。

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

Canvasとは

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

これまでHTML上で図を表現するためには、GIFやJPEGといったフォーマットの画像を用意する必要がありました。また、条件に応じて表示する図を変化させたり、アニメーションを実現するために、FlashJavaアプレットが使われてきました。

Canvasは、FlashJavaのようにプラグインを使わずに、JavaScriptベースで図を描くことができます。
Canvasは、もともとはAppleが発祥で、当初、Mac OSでおなじみのDashboardで使われた技術仕様です。その後、AppleMozilla FoundationOpera Softwareといったブラウザベンダが立ち上げたWHATWGという団体にて策定作業が行われていた「Web Applications」と呼ばれる規格に採用されました。

github.com



vincentgarreau.com





See the Pen
Particle & Mouse stalker
by yachin29 (@yachin29)
on CodePen.



recruit.lifeones.jp


webdesignfacts.net



www.webopixel.net




stitch.co.jp



y-n10.com



blog.8bit.co.jp





note.com



ics.media


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



https://school.yachin29.com/0414/


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