js实现一个跟随鼠标彩色粒子轨迹动画HTMLElement Web组件效果代码-html代码-BFW代码库

js实现一个跟随鼠标彩色粒子轨迹动画HTMLElement Web组件效果代码

代码语言：html

所属分类：粒子

代码描述：js实现一个跟随鼠标彩色粒子轨迹动画HTMLElement Web组件效果代码，继承HTMLElement 。

代码标签： js 跟随鼠标彩色粒子轨迹动画 HTMLElement Web 组件

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">


  
  
<style>
* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  overflow: hidden;
  display: grid;
  color: white;
  background: black;
}
</style>


  
  
</head>

<body translate="no">
  <pointer-particles></pointer-particles>
  
      <script >
class PointerParticle {
  constructor(spread, speed, component) {
    const { ctx, pointer, hue } = component;

    this.ctx = ctx;
    this.x = pointer.x;
    this.y = pointer.y;
    this.mx = pointer.mx * 0.1;
    this.my = pointer.my * 0.1;
    this.size = Math.random() + 1;
    this.decay = 0.01;
    this.speed = speed * 0.08;
    this.spread = spread * this.speed;
    this.spreadX = (Math.random() - 0.5) * this.spread - this.mx;
    this.spreadY = (Math.random() - 0.5) * this.spread - this.my;
    this.color = `hsl(${hue}, 90%, 60%)`;
  }

  draw() {
    this.ctx.fillStyle = this.color;
    this.ctx.beginPath();
    this.ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    this.ctx.fill();
  }

  collapse() {
    if (this.size > 0.1) this.size -= this.decay;
  }

  trail() {
    this.x += this.spreadX * this.size;
    this.y += this.spreadY * this.size;
  }

  update() {
    this.draw();
    this.trail();
    this.collapse();
  }
}

class PointerParticles extends HTMLElement {
  static register(tag = "pointer-particles") {
    if ("customElements" in window) {
      customElements.define(tag, this);
    }
  }

  static css = `
    :host {
      box-sizing: border-box;
      position: relative;
    }
    
    canvas {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      user-select: none;
    }
  `;

  constructor() {
    super();

    this.canvas;
    this.ctx;
    this.fps = 60;
    this.msPerFrame = 1000 / this.fps;
    this.timePrevious;
    this.particles = [];
    this.pointer = {
      x: 0,
      y: 0,
      mx: 0,
      my: 0
    };
    this.hue = 0;
  }

  connectedCallback() {
    const canvas = document.createElement("canvas");
    const slot = document.createElement("slot");
    const sheet = new CSSStyleSheet();

    this.shadowroot = this.attachShadow({ mode: "open" });

    sheet.replaceSync(PointerPartic.........完整代码请登录后点击上方下载按钮下载查看