Categoría · Menús de Navegación Nivel de Dificultad · Avanzado Publicado el · 15 de enero de 2024

Menú de Navegación Atracción Magnética

Un menú de navegación innovador con efectos de atracción magnética, ajustes dinámicos de diseño y animaciones interactivas suaves que responden a la proximidad del cursor

#magnetico #atraccion #dinamico #interactivo #fisica #animacion #menu

Diseño Responsivo

Soporte para Modo Oscuro

No

líneas

661

Compatibilidad del Navegador

No

Vista Previa en Vivo

Interactúa con el componente sin salir de la página.

300px

Menú de Navegación Atracción Magnética

Un menú de navegación innovador con efectos de atracción magnética, ajustes dinámicos de diseño y animaciones interactivas suaves que responden a la proximidad del cursor.

Características

  • Efectos de Atracción Magnética: Los elementos del menú se atraen hacia el cursor
  • Animaciones Dinámicas: Transformaciones suaves basadas en la proximidad del mouse
  • Cursor Personalizado: Cursor magnético que cambia según las interacciones
  • Campos Magnéticos Visuales: Indicadores visuales de las zonas de atracción
  • Control de Alternancia: Habilitar/deshabilitar efectos magnéticos
  • Efectos de Ondas: Animaciones de ondas magnéticas en los clics
  • Optimizado para Rendimiento: Animaciones suaves con requestAnimationFrame
  • Diseño Responsivo: Se adapta a todos los tamaños de pantalla

Uso

Perfecto para:

  • Sitios web creativos
  • Agencias de diseño
  • Portafolios interactivos
  • Aplicaciones web modernas
  • Interfaces experimentales
  • Proyectos de arte digital

El menú crea una experiencia de usuario única y atractiva con sus efectos de atracción magnética y animaciones dinámicas.

HTML

56

líneas

CSS

356

líneas

JavaScript

249

líneas


                <nav class="magnetic-menu">
  <div class="menu-container">
    <div class="brand-logo">
      <div class="logo-magnetic-field"></div>
      <span class="brand-text">MAGNÉTICO</span>
      <div class="logo-attraction"></div>
    </div>
    
    <ul class="menu-items">
      <li class="menu-item">
        <a href="#" class="menu-link" data-magnetic="true">
          <div class="magnetic-field"></div>
          <span class="link-text">Inicio</span>
          <div class="attraction-trail"></div>
        </a>
      </li>
      <li class="menu-item">
        <a href="#" class="menu-link" data-magnetic="true">
          <div class="magnetic-field"></div>
          <span class="link-text">Acerca</span>
          <div class="attraction-trail"></div>
        </a>
      </li>
      <li class="menu-item">
        <a href="#" class="menu-link" data-magnetic="true">
          <div class="magnetic-field"></div>
          <span class="link-text">Servicios</span>
          <div class="attraction-trail"></div>
        </a>
      </li>
      <li class="menu-item">
        <a href="#" class="menu-link" data-magnetic="true">
          <div class="magnetic-field"></div>
          <span class="link-text">Portafolio</span>
          <div class="attraction-trail"></div>
        </a>
      </li>
      <li class="menu-item">
        <a href="#" class="menu-link" data-magnetic="true">
          <div class="magnetic-field"></div>
          <span class="link-text">Contacto</span>
          <div class="attraction-trail"></div>
        </a>
      </li>
    </ul>
    
    <div class="magnetic-toggle">
      <button class="toggle-btn" id="magneticToggle">
        <div class="toggle-magnetic-field"></div>
        <span class="toggle-text">Magnético</span>
      </button>
    </div>
  </div>
  
  <div class="magnetic-cursor" id="magneticCursor"></div>
</nav>

              
56líneas
1855caracteres
HTMLIdioma

Fragmentos de Código Relacionados

Explora packs de plantillas

¿Necesitas bloques más grandes? Descubre landings y colecciones de componentes.

Abrir la biblioteca de plantillas →