ESW

Efecto PIXEL

Canvas

1. Custom Element y Shadow DOM

  • Registro del elemento:
    La clase PixelCanvas se registra como un custom element mediante customElements.define("pixel-canvas", PixelCanvas). Esto permite usar la etiqueta <pixel-canvas> en el HTML, aislando su lógica y estilos dentro de un shadow DOM.

  • Creación del canvas:
    Al conectarse el elemento (connectedCallback), se crea un elemento <canvas> que se añade al shadow DOM. Así se encapsula la renderización y se evitan conflictos de estilos externos.

2. Generación de la cuadrícula de píxeles

  • Datos de configuración:
    Los atributos data-gap, data-speed y data-colors configuran:

    • data-gap: El espacio (o salto) entre cada píxel, determinando la densidad de la cuadrícula.
    • data-speed: Controla la velocidad de animación de los píxeles.
    • data-colors: Define una lista de colores que se asignan aleatoriamente a cada píxel.

  • Creación de píxeles:
    En el método createPixels(), se recorre el canvas en pasos definidos por el gap y se crea una instancia de la clase Pixel para cada posición. Cada píxel recibe:

    • Una posición (x, y).
    • Un color elegido aleatoriamente.
    • Un retraso (delay) calculado en función de la distancia del píxel al centro del canvas. Esto genera un efecto radial: los píxeles más cercanos al centro comienzan antes que los que están en la periferia.

3. La clase Pixel y su animación

  • Propiedades y comportamiento:
    Cada objeto Pixel maneja:

    • Su tamaño (que varía entre un mínimo y un máximo).
    • La velocidad de cambio (con un valor aleatorio modulado por el parámetro speed).
    • Un contador y un delay para sincronizar el inicio de la animación.

  • Métodos de animación:

    • appear():
      Incrementa gradualmente el tamaño del píxel hasta alcanzar un tamaño máximo. Una vez alcanzado, se activa el modo “shimmer” (parpadeo), donde el tamaño fluctúa entre el máximo y un valor inferior.
    • disappear():
      Disminuye el tamaño del píxel hasta que se “apaga” (se vuelve inactivo), limpiando así el canvas cuando se termina la animación.
    • shimmer():
      Permite que el píxel “brille” pulsando suavemente, alternando el aumento y la disminución de su tamaño para dar un efecto vibrante.

4. Control de la animación

  • Eventos del contenedor:
    El <pixel-canvas> no se anima por sí mismo, sino que se le controla a través de eventos en su elemento padre (por ejemplo, al hacer hover o al recibir focus). Los eventos mouseenter y mouseleave (y los de foco) activan la animación:

    • Al pasar el mouse, se llama a handleAnimation("appear"), haciendo que cada píxel ejecute su método appear().
    • Al retirar el mouse, se invoca handleAnimation("disappear"), haciendo que los píxeles se reduzcan hasta desaparecer.

  • Bucle de animación:
    Usando requestAnimationFrame, el método animate() se ejecuta en cada frame (aproximadamente 60fps). Se limpia el canvas y se actualiza el estado de cada píxel según el método correspondiente (appear o disappear). Cuando todos los píxeles están “inactivos” (terminaron su animación), se cancela el bucle para ahorrar recursos.

5. Resultado visual e interacción

Al combinar la generación de la cuadrícula, el retardo basado en la distancia al centro y el efecto de parpadeo de cada píxel, se consigue un efecto visual muy dinámico e interactivo. Por ejemplo, al colocar el cursor sobre una “tarjeta” (<code>card</code>), se inicia la animación de los píxeles que aparecen de forma progresiva y brillante, y al retirarlo, la animación se revierte.

Cada tarjeta (WhatsApp, Facebook, Instagram, YouTube) personaliza este efecto cambiando:

  • El color activo (usando la variable CSS <code>–active-color</code>).
  • Los colores en el atributo data-colors del pixel-canvas.
  • La velocidad y el gap, adaptando la “intensidad” del efecto.

En resumen, este efecto combina la potencia del canvas, la modularidad de los custom elements y la animación basada en requestAnimationFrame para crear una experiencia visual atractiva y responsive que responde a la interacción del usuario. Como desarrollador full stack, notarás que se aprovechan técnicas modernas (como shadow DOM, ResizeObserver y custom elements) para lograr un componente reutilizable y de alto rendimiento.

CONTACTO

  • atobio459@gmail.com

mis redes sociales

Para tu ayuda

Elsaltoweb.es

Gracias por tu confianza