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

Sí

Soporte para Modo Oscuro

líneas

661

Compatibilidad del Navegador

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

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>

              

                @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

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

body {
  font-family: 'Inter', sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  cursor: none;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}

.magnetic-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.menu-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.brand-logo {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.brand-text {
  font-size: 1.8rem;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
  letter-spacing: 2px;
  position: relative;
  z-index: 3;
  transition: all 0.3s ease;
}

.logo-magnetic-field {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 50px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  opacity: 0;
  transition: all 0.3s ease;
}

.logo-attraction {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 30px;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
  border-radius: 50%;
  opacity: 0;
  transition: all 0.3s ease;
}

.brand-logo:hover .logo-magnetic-field {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.2);
}

.brand-logo:hover .logo-attraction {
  opacity: 1;
  animation: magnetic-pulse 2s ease-in-out infinite;
}

.menu-items {
  display: flex;
  list-style: none;
  gap: 40px;
  margin: 0;
  padding: 0;
}

.menu-item {
  position: relative;
}

.menu-link {
  position: relative;
  display: block;
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  padding: 15px 25px;
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transform-origin: center;
}

.link-text {
  position: relative;
  z-index: 3;
  transition: all 0.3s ease;
}

.magnetic-field {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 60px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  opacity: 0;
  transition: all 0.3s ease;
}

.attraction-trail {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
  border-radius: 50%;
  transition: all 0.4s ease;
}

.menu-link.magnetic-active {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 
    0 10px 30px rgba(255, 255, 255, 0.2),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.menu-link.magnetic-active .magnetic-field {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.2);
  animation: magnetic-field-pulse 1.5s ease-in-out infinite;
}

.menu-link.magnetic-active .attraction-trail {
  width: 100px;
  height: 100px;
  animation: attraction-ripple 1s ease-out infinite;
}

.menu-link.magnetic-active .link-text {
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
}

.magnetic-toggle {
  position: relative;
}

.toggle-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 25px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.toggle-magnetic-field {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  opacity: 0;
  transition: all 0.3s ease;
}

.toggle-text {
  position: relative;
  z-index: 2;
}

.toggle-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.05);
}

.toggle-btn:hover .toggle-magnetic-field {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.1);
}

.toggle-btn.active {
  background: rgba(255, 255, 255, 0.3);
  border-color: #ffffff;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
}

.toggle-btn.active .toggle-magnetic-field {
  opacity: 1;
  animation: magnetic-field-pulse 2s ease-in-out infinite;
}

.magnetic-cursor {
  position: fixed;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transition: all 0.1s ease;
  mix-blend-mode: difference;
}

.magnetic-cursor.attracted {
  transform: scale(1.5);
  background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);
}

@keyframes magnetic-pulse {
  0%, 100% {
    opacity: 0.2;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1.2);
  }
}

@keyframes magnetic-field-pulse {
  0%, 100% {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(1.2);
  }
  50% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.4);
  }
}

@keyframes attraction-ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0.8;
  }
  50% {
    width: 100px;
    height: 100px;
    opacity: 0.4;
  }
  100% {
    width: 150px;
    height: 150px;
    opacity: 0;
  }
}

@media (max-width: 768px) {
  .menu-container {
    flex-direction: column;
    gap: 20px;
    padding: 20px;
  }
  
  .menu-items {
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .menu-link {
    padding: 12px 20px;
    font-size: 0.9rem;
  }
  
  .brand-text {
    font-size: 1.5rem;
    letter-spacing: 1px;
  }
  
  body {
    cursor: auto;
  }
  
  .magnetic-cursor {
    display: none;
  }
}

@media (max-width: 480px) {
  .menu-items {
    flex-direction: column;
    width: 100%;
  }
  
  .menu-link {
    text-align: center;
    width: 100%;
  }
  
  .magnetic-toggle {
    width: 100%;
  }
  
  .toggle-btn {
    width: 100%;
  }
}

              

                document.addEventListener('DOMContentLoaded', function() {
  const menuLinks = document.querySelectorAll('.menu-link[data-magnetic="true"]');
  const toggleBtn = document.getElementById('magneticToggle');
  const magneticCursor = document.getElementById('magneticCursor');
  const brandLogo = document.querySelector('.brand-logo');
  
  let magneticEnabled = true;
  let mouseX = 0;
  let mouseY = 0;
  
  // Configuración de atracción magnética
  const magneticConfig = {
    strength: 0.3,
    radius: 100,
    smoothing: 0.1
  };
  
  // Actualizar posición del cursor personalizado
  function updateCursor(e) {
    mouseX = e.clientX;
    mouseY = e.clientY;
    
    if (magneticCursor) {
      magneticCursor.style.left = mouseX - 10 + 'px';
      magneticCursor.style.top = mouseY - 10 + 'px';
    }
  }
  
  // Calcular distancia entre dos puntos
  function getDistance(x1, y1, x2, y2) {
    return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
  }
  
  // Aplicar efecto magnético
  function applyMagneticEffect(element, mouseX, mouseY) {
    if (!magneticEnabled) return;
    
    const rect = element.getBoundingClientRect();
    const centerX = rect.left + rect.width / 2;
    const centerY = rect.top + rect.height / 2;
    
    const distance = getDistance(mouseX, mouseY, centerX, centerY);
    
    if (distance < magneticConfig.radius) {
      const force = (magneticConfig.radius - distance) / magneticConfig.radius;
      const pullX = (mouseX - centerX) * force * magneticConfig.strength;
      const pullY = (mouseY - centerY) * force * magneticConfig.strength;
      
      element.style.transform = `translate(\${pullX}px, \${pullY}px) scale(\${1 + force * 0.1})`;
      element.classList.add('magnetic-active');
      
      if (magneticCursor) {
        magneticCursor.classList.add('attracted');
      }
    } else {
      element.style.transform = 'translate(0px, 0px) scale(1)';
      element.classList.remove('magnetic-active');
      
      if (magneticCursor) {
        magneticCursor.classList.remove('attracted');
      }
    }
  }
  
  // Manejar movimiento del mouse
  document.addEventListener('mousemove', function(e) {
    updateCursor(e);
    
    if (!magneticEnabled) return;
    
    // Aplicar efecto magnético a los enlaces del menú
    menuLinks.forEach(link => {
      applyMagneticEffect(link, e.clientX, e.clientY);
    });
    
    // Aplicar efecto magnético al logo de marca
    if (brandLogo) {
      applyMagneticEffect(brandLogo, e.clientX, e.clientY);
    }
    
    // Aplicar efecto magnético al botón de alternancia
    if (toggleBtn) {
      applyMagneticEffect(toggleBtn, e.clientX, e.clientY);
    }
  });
  
  // Funcionalidad del botón de alternancia
  toggleBtn.addEventListener('click', function() {
    magneticEnabled = !magneticEnabled;
    this.classList.toggle('active');
    
    if (magneticEnabled) {
      this.querySelector('.toggle-text').textContent = 'Magnético';
    } else {
      this.querySelector('.toggle-text').textContent = 'Deshabilitado';
      
      // Restablecer todas las transformaciones
      menuLinks.forEach(link => {
        link.style.transform = 'translate(0px, 0px) scale(1)';
        link.classList.remove('magnetic-active');
      });
      
      if (brandLogo) {
        brandLogo.style.transform = 'translate(0px, 0px) scale(1)';
      }
      
      this.style.transform = 'translate(0px, 0px) scale(1)';
      
      if (magneticCursor) {
        magneticCursor.classList.remove('attracted');
      }
    }
  });
  
  // Efectos de clic
  menuLinks.forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      
      // Crear efecto de ondas magnéticas
      const rect = this.getBoundingClientRect();
      const centerX = rect.left + rect.width / 2;
      const centerY = rect.top + rect.height / 2;
      
      // Crear elemento de onda
      const wave = document.createElement('div');
      wave.style.position = 'fixed';
      wave.style.left = centerX - 25 + 'px';
      wave.style.top = centerY - 25 + 'px';
      wave.style.width = '50px';
      wave.style.height = '50px';
      wave.style.border = '2px solid rgba(255, 255, 255, 0.6)';
      wave.style.borderRadius = '50%';
      wave.style.pointerEvents = 'none';
      wave.style.zIndex = '9998';
      wave.style.animation = 'magnetic-wave 0.6s ease-out forwards';
      
      document.body.appendChild(wave);
      
      // Remover el elemento después de la animación
      setTimeout(() => {
        wave.remove();
      }, 600);
      
      // Efecto de vibración
      this.style.animation = 'magnetic-vibrate 0.3s ease-in-out';
      setTimeout(() => {
        this.style.animation = '';
      }, 300);
    });
  });
  
  // Interacción del logo de marca
  brandLogo.addEventListener('click', function() {
    // Crear múltiples ondas magnéticas
    const rect = this.getBoundingClientRect();
    const centerX = rect.left + rect.width / 2;
    const centerY = rect.top + rect.height / 2;
    
    for (let i = 0; i < 3; i++) {
      setTimeout(() => {
        const wave = document.createElement('div');
        wave.style.position = 'fixed';
        wave.style.left = centerX - 30 + 'px';
        wave.style.top = centerY - 30 + 'px';
        wave.style.width = '60px';
        wave.style.height = '60px';
        wave.style.border = '3px solid rgba(255, 255, 255, 0.8)';
        wave.style.borderRadius = '50%';
        wave.style.pointerEvents = 'none';
        wave.style.zIndex = '9998';
        wave.style.animation = 'magnetic-wave 1s ease-out forwards';
        
        document.body.appendChild(wave);
        
        setTimeout(() => {
          wave.remove();
        }, 1000);
      }, i * 200);
    }
  });
  
  // Agregar CSS para animaciones adicionales
  const style = document.createElement('style');
  style.textContent = `
    @keyframes magnetic-wave {
      0% {
        transform: scale(1);
        opacity: 0.8;
      }
      100% {
        transform: scale(4);
        opacity: 0;
      }
    }
    
    @keyframes magnetic-vibrate {
      0%, 100% { transform: translate(0px, 0px); }
      25% { transform: translate(-2px, 0px); }
      75% { transform: translate(2px, 0px); }
    }
  `;
  document.head.appendChild(style);
  
  // Optimización de rendimiento
  let ticking = false;
  
  function optimizedMouseMove(e) {
    if (!ticking) {
      requestAnimationFrame(() => {
        updateCursor(e);
        
        if (magneticEnabled) {
          menuLinks.forEach(link => {
            applyMagneticEffect(link, e.clientX, e.clientY);
          });
          
          if (brandLogo) {
            applyMagneticEffect(brandLogo, e.clientX, e.clientY);
          }
          
          if (toggleBtn) {
            applyMagneticEffect(toggleBtn, e.clientX, e.clientY);
          }
        }
        
        ticking = false;
      });
      ticking = true;
    }
  }
  
  // Reemplazar el event listener original con la versión optimizada
  document.removeEventListener('mousemove', updateCursor);
  document.addEventListener('mousemove', optimizedMouseMove);
  
  // Manejar salida del mouse de la ventana
  document.addEventListener('mouseleave', function() {
    if (magneticCursor) {
      magneticCursor.style.opacity = '0';
    }
  });
  
  document.addEventListener('mouseenter', function() {
    if (magneticCursor) {
      magneticCursor.style.opacity = '1';
    }
  });
});

              

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

Vista Previa en Vivo

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

Características

Uso

Fragmentos de Código Relacionados

Menú de Navegación Animado

Botones de Compartir en Redes Sociales Animados

Reproductor de Música Estilo Tarjeta

Explora packs de plantillas