ハートマークラボ第1号：ふわふわハートの軌跡

みなさん、ハートマークってお好きですか？
なかなか「嫌い！」って方はいないですよね💦
見ただけでほっこりしたり、貰うと嬉しい気持ちになれたり──
そんな“魔法のマーク”が、実はハートです。

でも、いざ自分で「ハートマークを描こう！」と思うと……
意外とむずかしかったりしませんか？そこで考えました。

だったらたくさん作って、
みんなでシェアしちゃえばいいじゃない！

そんな訳で少しずつ作って、だれでも気軽にコピペで使えて、
サイトにも、気持ちにも、あったかい彩りを添えられる。
そんな「ゆるくて平和なプロジェクト」です💖

記念すべき第1号は、こちら──

💖『ふわふわハートの軌跡』とは？
🌈 デモ
ダウンロード
🛠 コードを貼るだけで使える！
💡 応用アイデア

💖『ふわふわハートの軌跡』とは？

マウスを動かすたび、パステル色のハートがふんわりと軌跡を描き、クリックすると、ハートがパーンっと弾けて舞い上がる──そんな、いつまでもマウスカーソルを動かしたくなるようなアニメーションです。

🌈 デモ

このページまたは、リンク先でデモンストレーション中です。
試しにマウスカーソルで、いくつかの円を描くようにスライドさせてみて下さい。

※軌跡はPC版のみ、スマホだとクリック時の反応だけになります💦
もし見れないという方がいらしたらご連絡くださいませ。

ダウンロード

下記へHTML、CSS、JavaScriptを記載していますが、まとめてHTMLをダウンロードする方はこちらです。ZIP形式になっております。

HML-1　ふわふわハート軌跡HTML

🛠 コードを貼るだけで使える！

以下のコードを、あなたのHTMLページにそのまま貼り付ければOKです。
WordPressであれば、特定の記事にだけ入れたい場合はカスタムHTMLブロックに貼るだけでも動作します。

<!-- HTML -->
<canvas id="heart-canvas"></canvas>

<!-- CSS -->
<style>
  #heart-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
  }
</style>

<!-- JavaScript -->
<script>
const canvas = document.getElementById("heart-canvas");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const hearts = [];

document.addEventListener("mousemove", (e) => {
  for (let i = 0; i < 2; i++) {
    hearts.push({
      x: e.clientX,
      y: e.clientY,
      size: Math.random() * 20 + 20,
      color: `hsl(${Math.random() * 360}, 100%, 75%)`,
      alpha: 1,
      vx: (Math.random() - 0.5) * 2,
      vy: Math.random() * -1 - 1
    });
  }
});

document.addEventListener("click", (e) => {
  for (let i = 0; i < 30; i++) {
    hearts.push({
      x: e.clientX,
      y: e.clientY,
      size: Math.random() * 15 + 15,
      color: `hsl(${Math.random() * 360}, 100%, 75%)`,
      alpha: 1,
      vx: (Math.random() - 0.5) * 6,
      vy: (Math.random() - 0.5) * 6
    });
  }
});

function drawHeart(x, y, size, color, alpha) {
  ctx.save();
  ctx.translate(x, y);
  ctx.scale(size / 20, size / 24); // &#x1f4a1;ここで縦の高さをちょっと控えめに
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.bezierCurveTo(0, -3, -5, -3, -5, 0);
  ctx.bezierCurveTo(-5, 3, 0, 6, 0, 10);
  ctx.bezierCurveTo(0, 6, 5, 3, 5, 0);
  ctx.bezierCurveTo(5, -3, 0, -3, 0, 0);
  ctx.closePath();
  ctx.fillStyle = color;
  ctx.globalAlpha = alpha;
  ctx.fill();
  ctx.restore();
}

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let i = hearts.length - 1; i >= 0; i--) {
    const h = hearts[i];
    drawHeart(h.x, h.y, h.size, h.color, h.alpha);
    h.x += h.vx;
    h.y += h.vy;
    h.alpha -= 0.01;
    if (h.alpha <= 0) hearts.splice(i, 1);
  }
  requestAnimationFrame(animate);
}
animate();
</script>