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

Un elegante menú de navegación inspirado en el arte del origami con animaciones de plegado tipo papel, transformaciones geométricas y sofisticados efectos en capas
#origami #papel #plegado #geometrico #animacion #elegante #menu
Diseño Responsivo
Sí
Soporte para Modo Oscuro
líneas
725
Compatibilidad del Navegador
Vista Previa en Vivo

Interactúa con el componente sin salir de la página.
300px
Menú de Navegación Estilo Origami

Un elegante menú de navegación inspirado en el arte del origami con animaciones de plegado tipo papel, transformaciones geométricas y sofisticados efectos en capas.
Características

Efectos de Plegado: Animaciones que simulan el plegado de papel
Capas Múltiples: Elementos con profundidad y perspectiva 3D
Transformaciones Geométricas: Rotaciones y escalas dinámicas
Sombras Realistas: Efectos de sombra que simulan papel real
Líneas de Pliegue: Indicadores visuales de los puntos de plegado
Ondas de Papel: Animaciones de ondas al hacer clic
Control de Alternancia: Habilitar/deshabilitar efectos de plegado
Diseño Responsivo: Se adapta a todos los tamaños de pantalla
Uso

Perfecto para:
Sitios web artísticos
Portafolios creativos
Galerías de arte
Sitios de diseño
Aplicaciones educativas
Proyectos de origami
El menú crea una experiencia visual única que evoca la elegancia y precisión del arte del origami.
HTML
líneas
CSS
365
líneas
JavaScript
290
líneas
                <nav class="origami-menu">
  <div class="menu-container">
    <div class="brand-logo">
      <div class="logo-fold"></div>
      <span class="brand-text">ORIGAMI</span>
      <div class="logo-shadow"></div>
    </div>
    
    <ul class="menu-items">
      <li class="menu-item">
        <a href="#" class="menu-link" data-fold="true">
          <div class="paper-layer layer-1"></div>
          <div class="paper-layer layer-2"></div>
          <div class="paper-layer layer-3"></div>
          <span class="link-text">Inicio</span>
          <div class="fold-line"></div>
        </a>
      </li>
      <li class="menu-item">
        <a href="#" class="menu-link" data-fold="true">
          <div class="paper-layer layer-1"></div>
          <div class="paper-layer layer-2"></div>
          <div class="paper-layer layer-3"></div>
          <span class="link-text">Acerca</span>
          <div class="fold-line"></div>
        </a>
      </li>
      <li class="menu-item">
        <a href="#" class="menu-link" data-fold="true">
          <div class="paper-layer layer-1"></div>
          <div class="paper-layer layer-2"></div>
          <div class="paper-layer layer-3"></div>
          <span class="link-text">Servicios</span>
          <div class="fold-line"></div>
        </a>
      </li>
      <li class="menu-item">
        <a href="#" class="menu-link" data-fold="true">
          <div class="paper-layer layer-1"></div>
          <div class="paper-layer layer-2"></div>
          <div class="paper-layer layer-3"></div>
          <span class="link-text">Portafolio</span>
          <div class="fold-line"></div>
        </a>
      </li>
      <li class="menu-item">
        <a href="#" class="menu-link" data-fold="true">
          <div class="paper-layer layer-1"></div>
          <div class="paper-layer layer-2"></div>
          <div class="paper-layer layer-3"></div>
          <span class="link-text">Contacto</span>
          <div class="fold-line"></div>
        </a>
      </li>
    </ul>
    
    <div class="origami-toggle">
      <button class="toggle-btn" id="origamiToggle">
        <div class="toggle-fold"></div>
        <span class="toggle-text">Plegar</span>
      </button>
    </div>
  </div>
  
  <div class="paper-background">
    <div class="crease crease-1"></div>
    <div class="crease crease-2"></div>
    <div class="crease crease-3"></div>
  </div>
</nav>

              

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

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

body {
  font-family: 'Noto Sans', sans-serif;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    linear-gradient(45deg, transparent 49%, rgba(255, 255, 255, 0.1) 50%, transparent 51%),
    linear-gradient(-45deg, transparent 49%, rgba(255, 255, 255, 0.1) 50%, transparent 51%);
  background-size: 20px 20px;
  pointer-events: none;
  z-index: -1;
  opacity: 0.3;
}

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

.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;
  perspective: 1000px;
}

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

.logo-fold {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateX(0deg);
  width: 100px;
  height: 40px;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  opacity: 0;
  transition: all 0.4s ease;
  transform-style: preserve-3d;
}

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

.brand-logo:hover .logo-fold {
  opacity: 1;
  transform: translate(-50%, -50%) rotateX(-15deg) rotateY(10deg);
}

.brand-logo:hover .logo-shadow {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(10px);
}

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

.menu-item {
  position: relative;
  perspective: 1000px;
}

.menu-link {
  position: relative;
  display: block;
  color: #2c3e50;
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  padding: 15px 25px;
  border-radius: 8px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.1);
  transform-style: preserve-3d;
}

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

.paper-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  transition: all 0.4s ease;
  transform-origin: center;
}

.layer-1 {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  z-index: 1;
  transform: translateZ(0px);
}

.layer-2 {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  z-index: 2;
  transform: translateZ(2px) rotateX(0deg);
}

.layer-3 {
  background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
  z-index: 3;
  transform: translateZ(4px) rotateX(0deg);
}

.fold-line {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #6c757d, transparent);
  opacity: 0;
  transition: all 0.3s ease;
}

.menu-link.folding {
  transform: rotateX(-10deg) rotateY(5deg);
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.2),
    inset 0 0 20px rgba(255, 255, 255, 0.5);
}

.menu-link.folding .layer-1 {
  transform: translateZ(0px) rotateX(5deg);
}

.menu-link.folding .layer-2 {
  transform: translateZ(4px) rotateX(-5deg);
}

.menu-link.folding .layer-3 {
  transform: translateZ(8px) rotateX(-10deg);
}

.menu-link.folding .fold-line {
  width: 80%;
  opacity: 1;
}

.menu-link.folding .link-text {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transform: translateZ(10px);
}

.origami-toggle {
  position: relative;
  perspective: 1000px;
}

.toggle-btn {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: #2c3e50;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Noto Sans', sans-serif;
  font-weight: 500;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
}

.toggle-fold {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 8px;
  opacity: 0;
  transition: all 0.3s ease;
  transform: rotateX(0deg);
}

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

.toggle-btn:hover {
  transform: rotateX(-5deg) rotateY(2deg);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.toggle-btn:hover .toggle-fold {
  opacity: 1;
  transform: rotateX(-10deg);
}

.toggle-btn.active {
  background: rgba(52, 152, 219, 0.1);
  border-color: #3498db;
  color: #3498db;
  transform: rotateX(-10deg) rotateY(5deg);
}

.toggle-btn.active .toggle-fold {
  opacity: 1;
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  transform: rotateX(-15deg);
}

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

.crease {
  position: absolute;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
  opacity: 0;
  transition: all 0.5s ease;
}

.crease-1 {
  width: 2px;
  height: 100%;
  left: 25%;
  top: 0;
  transform: rotate(15deg);
}

.crease-2 {
  width: 100%;
  height: 2px;
  left: 0;
  top: 30%;
  transform: rotate(-5deg);
}

.crease-3 {
  width: 2px;
  height: 100%;
  right: 30%;
  top: 0;
  transform: rotate(-10deg);
}

.origami-menu.folded .crease {
  opacity: 1;
}

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

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

              

                document.addEventListener('DOMContentLoaded', function() {
  const menuLinks = document.querySelectorAll('.menu-link[data-fold="true"]');
  const toggleBtn = document.getElementById('origamiToggle');
  const origamiMenu = document.querySelector('.origami-menu');
  const brandLogo = document.querySelector('.brand-logo');
  
  let foldingEnabled = true;
  
  // Configuración de efectos de plegado
  const foldConfig = {
    duration: 400,
    easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
    stagger: 100
  };
  
  // Aplicar efecto de plegado
  function applyFoldEffect(element, intensity = 1) {
    if (!foldingEnabled) return;
    
    element.classList.add('folding');
    
    // Crear efecto de sombra dinámica
    const shadowIntensity = intensity * 0.3;
    element.style.boxShadow = `
      0 \${10 * intensity}px \${30 * intensity}px rgba(0, 0, 0, \${shadowIntensity}),
      inset 0 0 \${20 * intensity}px rgba(255, 255, 255, 0.5)
    `;
  }
  
  // Remover efecto de plegado
  function removeFoldEffect(element) {
    element.classList.remove('folding');
    element.style.boxShadow = '';
  }
  
  // Manejar hover en enlaces del menú
  menuLinks.forEach((link, index) => {
    link.addEventListener('mouseenter', function() {
      setTimeout(() => {
        applyFoldEffect(this, 1);
      }, index * 50);
    });
    
    link.addEventListener('mouseleave', function() {
      removeFoldEffect(this);
    });
  });
  
  // Funcionalidad del botón de alternancia
  toggleBtn.addEventListener('click', function() {
    foldingEnabled = !foldingEnabled;
    this.classList.toggle('active');
    origamiMenu.classList.toggle('folded');
    
    if (foldingEnabled) {
      this.querySelector('.toggle-text').textContent = 'Plegar';
      
      // Animar entrada de efectos de plegado
      menuLinks.forEach((link, index) => {
        setTimeout(() => {
          link.style.transition = 'all 0.4s ease';
          link.style.transform = 'rotateX(0deg) rotateY(0deg)';
        }, index * 100);
      });
    } else {
      this.querySelector('.toggle-text').textContent = 'Desplegar';
      
      // Remover todos los efectos de plegado
      menuLinks.forEach(link => {
        removeFoldEffect(link);
        link.style.transform = 'rotateX(0deg) rotateY(0deg)';
      });
    }
  });
  
  // Efectos de clic
  menuLinks.forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      
      // Crear efecto de plegado intenso
      this.style.transform = 'rotateX(-20deg) rotateY(10deg) scale(0.95)';
      
      // Crear ondas de papel
      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(() => {
          createPaperWave(centerX, centerY, i);
        }, i * 150);
      }
      
      // Restaurar transformación
      setTimeout(() => {
        this.style.transform = '';
      }, 300);
    });
  });
  
  // Crear ondas de papel
  function createPaperWave(x, y, index) {
    const wave = document.createElement('div');
    wave.style.position = 'fixed';
    wave.style.left = x - 25 + 'px';
    wave.style.top = y - 25 + 'px';
    wave.style.width = '50px';
    wave.style.height = '50px';
    wave.style.background = 'linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(248, 249, 250, 0.6) 100%)';
    wave.style.border = '1px solid rgba(0, 0, 0, 0.1)';
    wave.style.borderRadius = '8px';
    wave.style.pointerEvents = 'none';
    wave.style.zIndex = '9998';
    wave.style.transform = 'rotateX(-10deg) rotateY(5deg)';
    wave.style.animation = `paper-wave-\${index} 1s ease-out forwards`;
    
    document.body.appendChild(wave);
    
    setTimeout(() => {
      wave.remove();
    }, 1000);
  }
  
  // Interacción del logo de marca
  brandLogo.addEventListener('click', function() {
    // Crear múltiples capas de plegado
    const rect = this.getBoundingClientRect();
    const centerX = rect.left + rect.width / 2;
    const centerY = rect.top + rect.height / 2;
    
    for (let i = 0; i < 5; i++) {
      setTimeout(() => {
        const fold = document.createElement('div');
        fold.style.position = 'fixed';
        fold.style.left = centerX - 30 + 'px';
        fold.style.top = centerY - 15 + 'px';
        fold.style.width = '60px';
        fold.style.height = '30px';
        fold.style.background = `linear-gradient(135deg, rgba(255, 255, 255, \${0.8 - i * 0.1}) 0%, rgba(248, 249, 250, \${0.6 - i * 0.1}) 100%)`;
        fold.style.border = '1px solid rgba(0, 0, 0, 0.1)';
        fold.style.borderRadius = '4px';
        fold.style.pointerEvents = 'none';
        fold.style.zIndex = '9998';
        fold.style.transformStyle = 'preserve-3d';
        fold.style.animation = `brand-fold-\${i} 1.5s ease-out forwards`;
        
        document.body.appendChild(fold);
        
        setTimeout(() => {
          fold.remove();
        }, 1500);
      }, i * 100);
    }
  });
  
  // Agregar CSS para animaciones dinámicas
  const style = document.createElement('style');
  style.textContent = `
    @keyframes paper-wave-0 {
      0% {
        transform: rotateX(-10deg) rotateY(5deg) scale(1);
        opacity: 0.8;
      }
      50% {
        transform: rotateX(-20deg) rotateY(10deg) scale(1.5);
        opacity: 0.6;
      }
      100% {
        transform: rotateX(-30deg) rotateY(15deg) scale(2);
        opacity: 0;
      }
    }
    
    @keyframes paper-wave-1 {
      0% {
        transform: rotateX(-10deg) rotateY(-5deg) scale(1);
        opacity: 0.7;
      }
      50% {
        transform: rotateX(-15deg) rotateY(-10deg) scale(1.3);
        opacity: 0.5;
      }
      100% {
        transform: rotateX(-25deg) rotateY(-15deg) scale(1.8);
        opacity: 0;
      }
    }
    
    @keyframes paper-wave-2 {
      0% {
        transform: rotateX(10deg) rotateY(5deg) scale(1);
        opacity: 0.6;
      }
      50% {
        transform: rotateX(15deg) rotateY(10deg) scale(1.2);
        opacity: 0.4;
      }
      100% {
        transform: rotateX(20deg) rotateY(15deg) scale(1.6);
        opacity: 0;
      }
    }
    
    @keyframes brand-fold-0 {
      0% {
        transform: rotateX(0deg) rotateY(0deg) scale(1);
        opacity: 0.8;
      }
      100% {
        transform: rotateX(-30deg) rotateY(20deg) scale(2);
        opacity: 0;
      }
    }
    
    @keyframes brand-fold-1 {
      0% {
        transform: rotateX(0deg) rotateY(0deg) scale(1);
        opacity: 0.7;
      }
      100% {
        transform: rotateX(-25deg) rotateY(-15deg) scale(1.8);
        opacity: 0;
      }
    }
    
    @keyframes brand-fold-2 {
      0% {
        transform: rotateX(0deg) rotateY(0deg) scale(1);
        opacity: 0.6;
      }
      100% {
        transform: rotateX(20deg) rotateY(25deg) scale(1.6);
        opacity: 0;
      }
    }
    
    @keyframes brand-fold-3 {
      0% {
        transform: rotateX(0deg) rotateY(0deg) scale(1);
        opacity: 0.5;
      }
      100% {
        transform: rotateX(15deg) rotateY(-20deg) scale(1.4);
        opacity: 0;
      }
    }
    
    @keyframes brand-fold-4 {
      0% {
        transform: rotateX(0deg) rotateY(0deg) scale(1);
        opacity: 0.4;
      }
      100% {
        transform: rotateX(-15deg) rotateY(10deg) scale(1.2);
        opacity: 0;
      }
    }
  `;
  document.head.appendChild(style);
  
  // Efecto de paralaje suave en el fondo
  let ticking = false;
  
  function updateParallax() {
    if (!ticking) {
      requestAnimationFrame(() => {
        const scrolled = window.pageYOffset;
        const parallax = scrolled * 0.5;
        
        const creases = document.querySelectorAll('.crease');
        creases.forEach((crease, index) => {
          const offset = parallax * (index + 1) * 0.1;
          crease.style.transform += ` translateY(\${offset}px)`;
        });
        
        ticking = false;
      });
      ticking = true;
    }
  }
  
  window.addEventListener('scroll', updateParallax);
  
  // Inicialización de efectos
  setTimeout(() => {
    origamiMenu.style.opacity = '1';
    origamiMenu.style.transform = 'translateY(0)';
  }, 100);
});

              
Menú de Navegación Estilo Origami

Vista Previa en Vivo

Menú de Navegación Estilo Origami

Características

Uso

Fragmentos de Código Relacionados

Menú de Navegación Animado

Menú de Navegación 3D Flip

Botón de Acción Flotante

Explora packs de plantillas
