Webleb - Code-Snippets -

HTML

CSS

JS

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() {
    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 {
        display: grid;
        width: 100%;
        height: 100%;
        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 sheet = new CSSStyleSheet();

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

sheet.replaceSync(PointerParticles.css);
    this.shadowroot.adoptedStyleSheets = [sheet];

this.shadowroot.append(canvas);

this.canvas = this.shadowroot.querySelector("canvas");
    this.ctx = this.canvas.getContext("2d");
    this.setCanvasDimensions();
    this.setupEvents();
    this.timePrevious = performance.now();
    this.animateParticles();
  }

createParticles(event, { count, speed, spread }) {
    this.setPointerValues(event);

for (let i = 0; i < count; i++) {
      this.particles.push(new PointerParticle(spread, speed, this));
    }
  }

setPointerValues(event) {
    this.pointer.x = event.x - this.offsetLeft;
    this.pointer.y = event.y - this.offsetTop;
    this.pointer.mx = event.movementX;
    this.pointer.my = event.movementY;
  }

setupEvents() {
    const parent = this.parentNode;

parent.addEventListener("click", (event) => {
      this.createParticles(event, {
        count: 300,
        speed: Math.random() + 1,
        spread: Math.random() + 50
      });
    });

parent.addEventListener("pointermove", (event) => {
      this.createParticles(event, {
        count: 20,
        speed: this.getSpeed(event),
        spread: 1
      });
    });

window.addEventListener("resize", () => this.setCanvasDimensions());
  }

getSpeed(event) {
    const a = event.movementX;
    const b = event.movementY;
    const c = Math.floor(Math.sqrt(a * a + b * b));

return c;
  }

handleParticles() {
    for (let i = 0; i < this.particles.length; i++) {
      this.particles[i].update();

if (this.particles[i].size <= 0.1) {
        this.particles.splice(i, 1);
        i--;
      }
    }
  }

setCanvasDimensions() {
    const rect = this.parentNode.getBoundingClientRect();

this.canvas.width = rect.width;
    this.canvas.height = rect.height;
  }

animateParticles() {
    requestAnimationFrame(() => this.animateParticles());

const timeNow = performance.now();
    const timePassed = timeNow - this.timePrevious;

if (timePassed < this.msPerFrame) return;

const excessTime = timePassed % this.msPerFrame;

this.timePrevious = timeNow - excessTime;

this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    this.hue = this.hue > 360 ? 0 : (this.hue += 3);

this.handleParticles();
  }
}

PointerParticles.register();

Empfohlen

Ein Code von ytr3d3

Ein Code von facontheo1

wachsende magische Formen

HTML

CSS

JS

Empfohlen

Ein Code von ytr3d3

Ein Code von facontheo1

wachsende magische Formen

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS