Effet

20 kevekıbhack

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

29 September 2023

Animation de bouton de commande

5 July 2025

Panneau de connexion et d'inscription Glassy V2 de TheDoc

21 August 2024

Page de chargement animée

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Particles</title>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inconsolata:wght@300;400&display=swap');

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --bg: #030508;
    --accent1: #00f5d4;
    --accent2: #f72585;
    --accent3: #fee440;
    --text: #e8f4f8;
  }

body {
    background: var(--bg);
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    font-family: 'Inconsolata', monospace;
    cursor: none;
  }

canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
  }

.ui {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 10;
  }

.title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
  }

.title h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(4rem, 12vw, 10rem);
    color: transparent;
    -webkit-text-stroke: 1px rgba(0, 245, 212, 0.3);
    letter-spacing: 0.15em;
    line-height: 1;
    text-transform: uppercase;
    mix-blend-mode: screen;
    animation: fadeIn 2s ease forwards;
  }

.title p {
    font-size: clamp(0.65rem, 1.5vw, 0.85rem);
    color: rgba(232, 244, 248, 0.35);
    letter-spacing: 0.4em;
    text-transform: uppercase;
    margin-top: 1rem;
    animation: fadeIn 2.5s ease forwards;
  }

.corner {
    position: absolute;
    font-size: 0.65rem;
    color: rgba(0, 245, 212, 0.4);
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }
  .corner.tl { top: 2rem; left: 2rem; }
  .corner.br { bottom: 2rem; right: 2rem; text-align: right; }

.stats {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    font-size: 0.65rem;
    color: rgba(0, 245, 212, 0.35);
    letter-spacing: 0.15em;
    line-height: 2;
  }

.controls {
    position: absolute;
    top: 2rem;
    right: 2rem;
    display: flex;
    gap: 0.75rem;
    pointer-events: all;
  }

.btn {
    background: rgba(0, 245, 212, 0.05);
    border: 1px solid rgba(0, 245, 212, 0.2);
    color: rgba(0, 245, 212, 0.6);
    padding: 0.4rem 0.9rem;
    font-family: 'Inconsolata', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
  }
  .btn:hover {
    background: rgba(0, 245, 212, 0.12);
    border-color: rgba(0, 245, 212, 0.6);
    color: var(--accent1);
  }
  .btn.active {
    background: rgba(0, 245, 212, 0.15);
    border-color: var(--accent1);
    color: var(--accent1);
  }

.cursor {
    position: fixed;
    width: 6px; height: 6px;
    background: var(--accent1);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    mix-blend-mode: screen;
    transition: transform 0.1s;
  }
  .cursor-ring {
    position: fixed;
    width: 32px; height: 32px;
    border: 1px solid rgba(0, 245, 212, 0.4);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    transition: all 0.12s ease;
  }

@keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, -48%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
  }
</style>
</head>
<body>

<div class="ui">
  <div class="corner tl">Particle System v1.0</div>
  <div class="corner br">Move mouse to interact</div>
  <div class="stats" id="stats"></div>
  <div class="controls">
    <button class="btn active" id="btnNormal">Normal</button>
    <button class="btn" id="btnExplode">Explode</button>
    <button class="btn" id="btnVortex">Vortex</button>
    <button class="btn" id="btnWeb">Web</button>
  </div>
  <div class="title">
    <h1>Particles</h1>
    <p>Interactive canvas experiment</p>
  </div>
</div>

let W = canvas.width = window.innerWidth;
let H = canvas.height = window.innerHeight;
let mouse = { x: W / 2, y: H / 2 };
let mode = 'normal';
let frame = 0;

// Colors
const colors = ['#00f5d4', '#f72585', '#fee440', '#4cc9f0', '#7209b7'];

// Particle count based on screen size
const COUNT = Math.min(180, Math.floor((W * H) / 6000));

class Particle {
  constructor() { this.reset(true); }

reset(init = false) {
    this.x = init ? Math.random() * W : Math.random() * W;
    this.y = init ? Math.random() * H : Math.random() * H;
    this.baseX = this.x;
    this.baseY = this.y;
    this.size = Math.random() * 2.5 + 0.5;
    this.color = colors[Math.floor(Math.random() * colors.length)];
    this.alpha = Math.random() * 0.7 + 0.2;
    this.speed = Math.random() * 0.8 + 0.2;
    this.angle = Math.random() * Math.PI * 2;
    this.vx = Math.cos(this.angle) * this.speed;
    this.vy = Math.sin(this.angle) * this.speed;
    this.life = 1;
    this.decay = Math.random() * 0.003 + 0.001;
    this.orbitRadius = Math.random() * 120 + 40;
    this.orbitAngle = Math.random() * Math.PI * 2;
    this.orbitSpeed = (Math.random() - 0.5) * 0.02;
    this.twinkle = Math.random() * Math.PI * 2;
  }

update() {
    this.twinkle += 0.05;
    const twinkleAlpha = this.alpha * (0.6 + 0.4 * Math.sin(this.twinkle));

const dx = mouse.x - this.x;
    const dy = mouse.y - this.y;
    const dist = Math.sqrt(dx * dx + dy * dy);
    const influence = 120;

if (mode === 'normal') {
      this.x += this.vx;
      this.y += this.vy;

// Gentle attract to mouse
      if (dist < influence) {
        const force = (influence - dist) / influence;
        this.x += (dx / dist) * force * 1.5;
        this.y += (dy / dist) * force * 1.5;
      }

// Wrap
      if (this.x < -5) this.x = W + 5;
      if (this.x > W + 5) this.x = -5;
      if (this.y < -5) this.y = H + 5;
      if (this.y > H + 5) this.y = -5;

} else if (mode === 'explode') {
      if (dist < 150) {
        const force = (150 - dist) / 150 * 6;
        this.x -= (dx / dist) * force;
        this.y -= (dy / dist) * force;
      }
      this.x += this.vx * 0.5;
      this.y += this.vy * 0.5;
      this.vx *= 0.98;
      this.vy *= 0.98;

if (this.x < 0 || this.x > W) this.vx *= -1;
      if (this.y < 0 || this.y > H) this.vy *= -1;
      this.x = Math.max(0, Math.min(W, this.x));
      this.y = Math.max(0, Math.min(H, this.y));

} else if (mode === 'vortex') {
      this.orbitAngle += this.orbitSpeed;
      const targetX = mouse.x + Math.cos(this.orbitAngle) * this.orbitRadius;
      const targetY = mouse.y + Math.sin(this.orbitAngle) * this.orbitRadius;
      this.x += (targetX - this.x) * 0.08;
      this.y += (targetY - this.y) * 0.08;

} else if (mode === 'web') {
      this.x += this.vx * 0.4;
      this.y += this.vy * 0.4;
      if (this.x < 0 || this.x > W) this.vx *= -1;
      if (this.y < 0 || this.y > H) this.vy *= -1;
      this.x = Math.max(0, Math.min(W, this.x));
      this.y = Math.max(0, Math.min(H, this.y));
    }

this._currentAlpha = twinkleAlpha;
  }

draw() {
    ctx.save();
    ctx.globalAlpha = this._currentAlpha;
    ctx.fillStyle = this.color;
    ctx.shadowBlur = 8;
    ctx.shadowColor = this.color;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fill();
    ctx.restore();
  }
}

// Init particles
const particles = Array.from({ length: COUNT }, () => new Particle());

// Add burst particles on click
function burst(x, y) {
  const burstCount = 30;
  for (let i = 0; i < burstCount; i++) {
    const p = new Particle();
    p.x = x; p.y = y;
    const angle = (i / burstCount) * Math.PI * 2;
    const speed = Math.random() * 5 + 2;
    p.vx = Math.cos(angle) * speed;
    p.vy = Math.sin(angle) * speed;
    p.size = Math.random() * 3 + 1;
    p.life = 1;
    p.isBurst = true;
    p.decay = 0.02;
    particles.push(p);
  }
}

function animate() {
  frame++;
  ctx.fillStyle = 'rgba(3, 5, 8, 0.18)';
  ctx.fillRect(0, 0, W, H);

// Remove dead burst particles
  for (let i = particles.length - 1; i >= 0; i--) {
    if (particles[i].isBurst) {
      particles[i].life -= particles[i].decay;
      particles[i]._currentAlpha = particles[i].life;
      if (particles[i].life <= 0) {
        particles.splice(i, 1);
        continue;
      }
    }
    particles[i].update();
  }

drawConnections();
  if (mode !== 'vortex') drawMouseConnections();

particles.forEach(p => p.draw());

// Stats
  if (frame % 30 === 0) {
    stats.textContent = `PARTICLES: ${particles.length}\nMODE: ${mode.toUpperCase()}\nFPS: ~60`;
  }

requestAnimationFrame(animate);
}

// Events
document.addEventListener('mousemove', e => {
  mouse.x = e.clientX;
  mouse.y = e.clientY;
  cursor.style.left = e.clientX + 'px';
  cursor.style.top = e.clientY + 'px';
  cursorRing.style.left = e.clientX + 'px';
  cursorRing.style.top = e.clientY + 'px';
});

document.addEventListener('click', e => {
  if (e.target.classList.contains('btn')) return;
  burst(e.clientX, e.clientY);
});

document.addEventListener('touchmove', e => {
  e.preventDefault();
  mouse.x = e.touches[0].clientX;
  mouse.y = e.touches[0].clientY;
}, { passive: false });

document.addEventListener('touchstart', e => {
  burst(e.touches[0].clientX, e.touches[0].clientY);
});

window.addEventListener('resize', () => {
  W = canvas.width = window.innerWidth;
  H = canvas.height = window.innerHeight;
});

// Mode buttons
document.querySelectorAll('.btn').forEach(btn => {
  btn.addEventListener('click', () => {
    document.querySelectorAll('.btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    mode = btn.id.replace('btn', '').toLowerCase();
  });
});

animate();
</script>
</body>
</html>

Effet

Recommandé

Animation de bouton de commande

Panneau de connexion et d'inscription Glassy V2 de TheDoc

Page de chargement animée

HTML

CSS

JS

Recommandé

Animation de bouton de commande

Panneau de connexion et d'inscription Glassy V2 de TheDoc

Page de chargement animée

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS