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
saiyou.lifeones.jp
webdesignfacts.net
stitch.co.jp
y-n10.com
blog.8bit.co.jp
note.com
ics.media
さらにカーソルがマウスに追随する、「マウスストーカー」を導入してみましょう。
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');
}