Menú de Navegación Efectos de Partículas
Un menú de navegación impresionante con sistemas dinámicos de partículas, animaciones interactivas y efectos visuales hipnotizantes que crean una experiencia de usuario inmersiva
Diseño Responsivo
Sí
Soporte para Modo Oscuro
No
líneas
652
Compatibilidad del Navegador
No
Vista Previa en Vivo
Interactúa con el componente sin salir de la página.
Menú de Navegación Efectos de Partículas
Un menú de navegación impresionante con sistemas dinámicos de partículas, animaciones interactivas y efectos visuales hipnotizantes que crean una experiencia de usuario inmersiva.
Características
- Sistema Dinámico de Partículas: Generación y animación de partículas en tiempo real
- Efectos Interactivos: Las partículas responden a los movimientos y clics del mouse
- Partículas Codificadas por Color: Diferentes colores para cada elemento del menú
- Animación Basada en Canvas: Animaciones suaves de partículas a 60fps
- Partículas Ambientales: Efectos de partículas de fondo para crear atmósfera
- Optimizado para Rendimiento: Gestión y renderizado eficiente de partículas
- Control de Alternancia: Habilitar/deshabilitar efectos de partículas
- Diseño Responsivo: Se adapta a todos los tamaños de pantalla
Uso
Perfecto para:
- Sitios web de juegos
- Empresas tecnológicas
- Agencias creativas
- Diseños futuristas
- Portafolios interactivos
- Aplicaciones web modernas
El menú crea una experiencia de usuario atractiva y dinámica con sus efectos visuales basados en partículas y animaciones suaves.
HTML
58
líneas
CSS
321
líneas
JavaScript
273
líneas
<nav class="particle-menu">
<canvas id="particleCanvas" class="particle-canvas"></canvas>
<div class="menu-container">
<div class="brand-logo">
<div class="logo-particles"></div>
<span class="brand-text">PARTÍCULA</span>
<div class="logo-glow"></div>
</div>
<ul class="menu-items">
<li class="menu-item">
<a href="#" class="menu-link" data-particles="blue">
<div class="link-particles"></div>
<span class="link-text">Inicio</span>
<div class="particle-trail"></div>
</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link" data-particles="purple">
<div class="link-particles"></div>
<span class="link-text">Acerca</span>
<div class="particle-trail"></div>
</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link" data-particles="green">
<div class="link-particles"></div>
<span class="link-text">Servicios</span>
<div class="particle-trail"></div>
</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link" data-particles="orange">
<div class="link-particles"></div>
<span class="link-text">Portafolio</span>
<div class="particle-trail"></div>
</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link" data-particles="red">
<div class="link-particles"></div>
<span class="link-text">Contacto</span>
<div class="particle-trail"></div>
</a>
</li>
</ul>
<div class="particle-toggle">
<button class="toggle-btn" id="particleToggle">
<div class="toggle-particles"></div>
<span class="toggle-text">Efectos</span>
</button>
</div>
</div>
<div class="ambient-particles"></div>
</nav>